Hey there, I'm currently facing an issue with passing props from my vue router. It seems like nothing is being printed and when I checked in the mounted hook, it's returning undefined. However, strangely enough, when I use
console.log(this.$route.params.id);this.id, it returns undefined. In my User template, no output is being displayed. The same code works perfectly fine in the online tutorial that I'm following. Can anyone help me out with this? Could there have been some modifications in a recent release?
let User = {
props: ['id'],
template: `
<div>Hello # {{id}}</div>
`,
mounted() {
console.log(this.$route.params); // this returns the value
console.log(this.id); // this gives 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1761627257253921392623">[email protected]</a>/dist/vue.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c7a7969217e637978697e4c3e223c223c">[email protected]</a>/dist/vue-router.js"></script>
<div id="app">
<app></app>
</div>