Ruoyi框架(点击表格跳转二级页面)

在菜单管理里面我们可以看到 仪事项调用为二级菜单,他的父级路由为 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);
}