在菜单管理里面我们可以看到 仪事项调用为二级菜单,他的父级路由为 serviceUse
route.js文件配置
// 首先我们先在 router.js文件中配置一下二级和三级页面
export const constantRoutes = [
{
path: '/serviceUse',// 这里的/serviceUse就是父级路由
component: Layout,
hidden: true,
children: [// 父级路由下面还有子路由
{
/*
这里的index就是我们给二级页面定义的路由,那么此时我们的二级页面的路由为
/serviceUse/index/:参数
*/
path: 'index/:name',// 这个index可以自己定义
component: () => import('@/views/serviceUse/useDetails/index'),
name: 'useDetailsDate',
meta: { title: '二级', icon: 'dashboard', activeMenu: '/serviceUse/index' }
}
]
},
{
path: '/serviceUse',// 这里的/serviceUse就是父级路由
component: Layout,
hidden: true,
children: [// 父级路由下面还有子路由
{
/*
这里的index就是我们给三级页面定义的路由,那么此时我们的三级页面的路由为
/serviceUse/index/:参数
*/
path: 'index/',// 这个index可以自己定义
component: () => import('@/views/serviceUse/useDataList/index'),
name: 'useDataList',
meta: { title: '三级', icon: 'dashboard', activeMenu: '/serviceUse/index' }
}
]
},
]
页面路由跳转:
跳转到二级页面:
二级页面接收参数:
/*
因为我们是直接把参数拼接在二级页面路由的后面,
那么接收的时候就需要通过router.params.name来接收参数
*/
// 引入router
const route = useRoute();
const interfaceName = ref(route.params && route.params.name);
注意:
// params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数,没有也没关系
// arams一旦设置在路由,params就是路由的一部分,如果这个路由有params传参,但是在跳转的时候没有传这个参数,会导致跳转失败或者页面会没有内容
点击按钮关闭并返回上一级:
function handleClose() {
const obj = { path: "/serviceUse/professial" };
proxy.$tab.closeOpenPage(obj);
}
==============================================================
二级页面跳转到三级页面(用的query传参):
三级页面接收参数:
/*
因为我们是直接把参数拼接在二级页面路由的后面,
那么接收的时候就需要通过router.params.name来接收参数
*/
// 引入router
const route = useRoute();
const dayTime = ref(route.query && route.query.time);
const interfaceName = ref(route.query && route.query.interfaceName);
因为我们从二级跳转到三级时携带了参数,那么我们点击关闭返回上一级页面时,要把二级页面带来的参数拼到路由后面,否则二级页面会没有参数(二级页面就是根据一级页面传过来的接口名称字段来请求数据的)
/** 返回按钮操作 */
function handleClose() {
const obj = { path: `/serviceUse/index/${route.query && route.query.name}` };
proxy.$tab.closeOpenPage(obj);
}