CODEWITHSUNDEEP
javascriptvuejs2vue-router
Abid
Abid

Reputation: 515

How to avoid this type of path redundancy in Vue router?

So, as usually we do like this for routing.

const routes = [
{
    path: '/store',
    component: Dashboard
},
{
    path: '/store/products',
    component: ProductsView
},
{
    path: '/store/products/add',
    component: ProductsAddView
},
]

Here I'm writing the path /store every time. Is there any way to write this beginning of the path once?

I want to tell router, if you find /products or /products/add after /store then render those views. Every time not writing the whole path /store/products.

Upvotes: 0

Views: 134

Answers (1)

Uchendu
Uchendu

Reputation: 1066

Use Nested Routes for Vue Router.

Example from the Vue Router documentation adapted to your use case:

const router = new VueRouter({
  routes: [
    { 
      path: '/store/', 
      component: Dashboard,
      children: [
        {
          // route /store/products
          path: 'products',
          component: ProductsView
          children: [
            // route /store/products/add
            path: 'add',
            component: ProductsAddView
          ]
        }
      ]
    }
  ]
})

Jsfiddle of the Vue Router documentation for a live example.

Upvotes: 4

Related Questions