Hola, estoy tratando de pasar accesorios desde mi enrutador vue, pero no está imprimiendo nada y cuando está conectado, regresa indefinido, pero está dando valor cuando estoy probando console.log(this.$route.params.id); cuando trato de que this.id devuelve indefinido o más bien en mi plantilla de usuario no genera nada, el mismo código funciona en el tutorial en línea que estoy viendo, por favor ayúdenme, ¿se produjo alguna modificación en una versión reciente?
let User = { props: ['id'], template: ` <div>Hello # {{id}}</div> `, mounted() { console.log(this.$route.params); // this is returning the value console.log(this.id); // this is giving undefined } } let App = { template: ` <div class="wrapper"> <router-view></router-view> </div> ` } let router = new VueRouter({ routes: [{ path: '/user/:id', component: User, props: true }, ], }) let app = new Vue({ el: '#app', router: router, components: { 'app': App } }) router.push('/user/1') <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script> <div id="app"> <app></app> </div>Está utilizando una versión muy antigua de Vue Router. Simplemente cambie a la versión actual, 3.5.2, y su código funcionará como se espera...
let User = { props: ['id'], template: ` <div>Hello # {{id}}</div> `, mounted() { console.log(this.$route.params); // this is returning the value console.log(this.id); // this is giving undefined } } let App = { template: ` <div class="wrapper"> <router-view></router-view> </div> ` } let router = new VueRouter({ routes: [{ path: '/user/:id', component: User, props: true }, ], }) let app = new Vue({ el: '#app', router: router, components: { 'app': App } }) router.push('/user/1') <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://unpkg.com/vue-router@3.5.2/dist/vue-router.js"></script> <div id="app"> <app></app> </div>