将vue.js路由参数传递给组件

Question

我在获取要直接传递到组件中的路由参数时遇到问题。我遵循了文档中的多个方向(包括使用以下代码中的Composition API(，但当CourseModule.vue首次呈现时，我仍然得到未定义。

路线定义

{
path: '/module/:id',
name: 'Course Module',
props: true,
component: () => import('../views/CourseModule.vue'),
},

课程模块.vue：

<template>
<div class="AppHome">
<CustomerItem />
<CourseModuleItem :coursemodule-id="this.CoursemoduleId"/>
</div>
</template>
<script>
import { useRoute } from 'vue-router';
import CustomerItem from '../components/customers/customer-item.vue';
import CourseModuleItem from '../components/coursemodules/coursemodule-item.vue';
export default {
setup() {
const route = useRoute();
alert(`CourseModule.vue setup: ${route.params.id}`);
return {
CoursemoduleId: route.params.id,
};
},
components: {
CustomerItem,
CourseModuleItem,
},
mounted() {
alert(`CourseModule.vue mounted: ${this.CoursemoduleId}`);
},
};
</script>

课程模块项目。vue:

<template>
<div id="module">
<div v-if="module.data">
<h2>Course: {{module.data.ModuleName}}</h2>
</div>
<div v-else-if="module.error" class="alert alert-danger">
{{module.error}}
</div>
<Loader v-else-if="module.loading" />
</div>
</template>
<script>
import Loader from '../APILoader.vue';
export default {
props: {
CoursemoduleId: String,
},
components: {
Loader,
},
computed: {
module() {
return this.$store.getters.getModuleById(this.CoursemoduleId);
},
},
mounted() {
alert(`coursemodule-item.vue: ${this.CoursemoduleId}`);
this.$store.dispatch('setModule', this.CoursemoduleId);
},
};
</script>

我的警报输出如下：

CourseModule.vue设置：zzyClJDQ3QAKuQ2R52AC35k3Hc0yIgft

课程模块-项目.vue：未定义

CourseModule.vue安装：zzyClJDQ3QAKuQ2R52AC35k3Hc0yIgft

正如您所看到的，path参数在顶级Vue中运行良好，但它仍然没有被传递到组件中。

Answer 1

您传递给CourseModuleItem组件的带有烤串的:coursemodule-id道具将成为基于camelcoursemoduleId道具的

道具外壳(骆驼案例与烤肉串案例(

试试这个

// coursemodule-item.vue
...
props: {
coursemoduleId: String,
},
...
mounted() {
alert(`coursemodule-item.vue: ${this.coursemoduleId}`);
this.$store.dispatch('setModule', this.coursemoduleId);
},