無法從 Vue 路由器傳遞組件中的道具

Question

嗨，我正在嘗試從我的 vue 路由器傳遞道具，但它沒有打印任何內容，並且在登錄時安裝它返回未定義，但是當我嘗試console.log(this.$route.params.id); 當我嘗試this.id返回未定義或者更確切地說在我的用戶模板中它沒有輸出任何東西時，相同的代碼在我正在觀看的在線教程中工作，請幫助我，最近的版本中是否發生了任何修改

 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>

Answer 1

您使用的是非常舊版本的 Vue Router。 只需切換到當前版本 - 3.5.2 - 你的代碼就會按預期工作....

 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>