How to pass props in Vue Router

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

<!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">
    <app></app>
</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 User = {
        props: ['id'],
        template: `
            <div>Hello # {{id}}</div>
        `,
        mounted() {

            console.log(this.$route.params.id); // 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
        }

    })
</script>
</body>

</html>

kuns25

4 years ago

Best Answer

Level 6

resolved by updating link

Please or to participate in this conversation.