如何在Vue路由器中避免这种类型的路径冗余

Question

所以，像往常一样，我们喜欢这样进行路由。

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

在这里，我每次都写路径/store。有没有办法把这条路的开头写一遍？

我想告诉路由器，如果在/store之后找到/products or /products/add，则渲染这些视图。每次不写入整个路径CCD_ 4。

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
]
}
]
}
]
})

Jsfidle的Vue路由器文档的一个实际例子。