Cannot pass props in component from Vue router-CodePudding

Hi I'm trying to pass props from my vue router but it's not printing anything and when logged in mounted it's returning undefined, but its giving value when I'm trying console.log(this.$route.params.id); when I try for this.id returns undefined or rather in my User template its not outputting anything, same code is working in the online tutorial that I'm watching, please help me, is there any modification happened in a recent release

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/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>

<div id="app">
  <app></app>
</div>

CodePudding user response：

You are using very old version of Vue Router. Just switch to current version - 3.5.2 - and your code will work as expected....

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/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>

<div id="app">
  <app></app>
</div>

CodePudding user response：

I have achieved some result with this.$route.params. Check this out url with "/path/to/file/cbutton/5". But, I could not access data props directly.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<div id="app">
    <p>
        <router-link to="/cbutton">Let's count</router-link>
    </p>
    {{ message }}
    <router-view></router-view>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>

<script>

    let CustomButton = Vue.component('button-counter', {
        props: ['data'],
        data: function () {
            return {
                count: 0
            }
        },
        methods: {
            incrementIt(){
                this.count  ;
                console.log("data is", this.$route.params.data)
            }
        },
        template: '<button v-on:click="incrementIt">You clicked me {{ count }} times.</button>'
    })

    let router = new VueRouter({
        routes: [
            { path: '/cbutton/:data', component: CustomButton, props: true },
        ],

    })

    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }, 
        router,
        components: {
            'custom-button': CustomButton
        }
    })
</script>
</body>

</html>