Как избежать такого типа избыточности в Vue роутере?

Question

Итак, как обычно мы делаем это для маршрутизации.

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

Здесь я пишу путь /store каждый раз. Есть ли способ записать это начало пути один раз?

Я хочу сказать маршрутизатору, что если вы найдете /products or /products/add после /store, то выполните рендеринг этих представлений. Каждый раз не пишу весь путь /store/products.

Answer 1

Использование Вложенных маршрутов для Vue Маршрутизатор.

Пример из документации Vue Маршрутизатор, адаптированной к вашему случаю использования:

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 документации Vue Router для примера в реальном времени.