[Vuejs]-VueJS Child's Component Routing

by

0👍

✅

If you’re trying to add child route for the component SecondPage

add the route like follows

{
    name: 'SecondPage',
    path: '/Controller/SecondPage',
    component: SecondPage,
    children: [
        {
            name: 'catalog' // use name for navigation
            path: 'Catalog/:key', // using key as parameter
            component: CatalogComponent,
        },
    ]
},

Now inside the component 

<router-link :to="{name:'catalog',params:{key:111}}">Category 1</router-link>

On clicking it will navigate to a path /Controller/SecondPage/Catalog/111

Note that the key will append with the url as parameter not as query.

It is not necessary to use name, you can use the path instead.

Leave a comment