Tengo problemas para que un parámetro de ruta pase directamente a un componente. Seguí varios conjuntos de instrucciones en los documentos (incluido el uso de la API de composición como en el siguiente código), pero todavía no estoy definido cuando CourseModule.vue se muestra por primera vez.

Definición de ruta

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

CourseModule.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>

cursomódulo-elemento.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>

El resultado de mis alertas es el siguiente:

Configuración de CourseModule.vue: zzyClJDQ3QAKuQ2R52AC35k3Hc0yIgft

módulo-curso-elemento.vue: indefinido

CourseModule.vue montado: zzyClJDQ3QAKuQ2R52AC35k3Hc0yIgft

Como puede ver, el parámetro de ruta funciona bien en el Vue de nivel superior, pero aún no se pasa al componente.