若依实现路由跳转功能 动态路由
若依前端中的动态路由参考代码
js
动态路由设置:router文件
{
path: '/system/dict-data',
component: Layout,
hidden: true,
permissions: ['system:dict:list'],
children: [
{
path: 'index/:dictId(\\d+)',
component: () => import('@/views/system/dict/data'),
name: 'Data',
meta: { title: '字典数据', activeMenu: '/system/dict' }
}
]
},
路由跳转到新页面
<el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
<template #default="scope">
<router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
<span>{{ scope.row.dictType }}</span>
</router-link>
</template>
</el-table-column>
查看详情的动态路由写法(保证权限控制继续生效)
js
{
path: '/hg/contract-detail',
component: Layout,
hidden: true,
permissions: ['hg:contract:list'],
children: [
{
path: 'index/:id(\\d+)',
component: () => import('@/views/hg/contract/detail'),
name: 'detail',
meta: { title: '查看详情' ,activeMenu: '/hg/contract' }
}
]
},
动态路由获取参数
js
//首先要导入route对象
const route = useRoute();
//通过route.params来获取请求中携带的id,然后再进行下一步操作
getDetail(route.params && route.params.id);