我有以下 router.js ,其中包含数十个value-x,即value-1,value-2。
const router = new Router({
routes: [
{
path: "/plant/value-one",
name: "value-one",
components: {
default: Site
},
props: {
default: {
tab: 'value-one',
menu: 'value-one'
}
}
},
{
path: "/plant/value-two",
name: "value-two",
components: {
default: Site
},
props: {
default: {
tab: 'value-two',
menu: 'value-two'
}
}
}
]
}
)
我想把它变成这样:
path: "/plant/*"
我尝试了以下操作:
const router = new Router({
routes: [
{
path: "/plant/{:name}",
name: name,
components: {
default: Site
},
props: {
default: {
tab: name,
menu: name
}
}
}
]
}
)
名称变量也应传递到路线的名称以及标签和菜单变量。
我在这里想念什么?
答案 0 :(得分:1)
我建议使用以下子路线:
{
path: '/plant',
component: plantComponent,
children: [
{
path: ':name',
component: someComponent,
name: 'someName'
},
]
}
现在plant /之后的任何路线都可以定义为路线的子级,并且我已经定义了一条路线:name
,它将用于plant / *
如果您不想使用子路由,而只关心传递路由参数,请使用不带花括号的参数:
path: "/plant/:name",