当前位置 博文首页 > hibiscusxin的博客：vue-router动态路径
路由，动态路径参数 以冒号开通
// router.js
{
path: '/edit/',
component: backNav,
hidden: true,
children: [{
// 动态路径参数 以冒号开通
path: ':type',
hidden: true,
component: () => import('@/views/wholePiece/component/Material'),
meta: { title: '编辑款式', component: 'step', belong: 'edit' }
}]
}
使用
<el-menu
:default-active="this.$route.path"
router
@select="handleSelect"
>
<el-menu-item
v-for="item in navList"
:key="item.name"
:index="`${ item.path + item.params.type }`"
:route="{ path: item.path + item.params.type, query: { styleId: styleId, payloadId: item.payloadId }}"
>
{{ item.navItem }}
</el-menu-item>
</el-menu>
<script>
export default {
data() {
return {
navList: [
{
path: '/edit/designChart',
name: 'DesignChart',
params: { type: '' },
payloadId: 0,
navItem: '设计图1'
},
{
path: '/edit/cad',
name: 'CAD',
params: { type: '' },
payloadId: 1,
navItem: 'CAD'
},
{
path: '/edit/',
params: { type: 'material' },
name: 'Material',
payloadId: 2,
navItem: '面辅料'
},
{
path: '/edit/',
params: { type: 'measure' },
name: 'Measure',
payloadId: 3,
navItem: '尺寸表'
},
{
path: '/edit/',
params: { type: 'sewing' },
name: 'Sewing',
payloadId: 4,
navItem: '缝制工程'
},
{
path: '/edit/',
params: { type: 'process' },
name: 'Process',
payloadId: 5,
navItem: '工序'
}
]
}
},
methods: {
handleSelect(key, keyPath) {
this.$emit('click-change', key)
}
}
}
</script>
