Ruoyi framework (click the table to jump to the secondary page)

In the menu management, we can see that the instrument item is called as a second-level menu, and its parent route is serviceUse

route.js file configuration

// 首先我们先在 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' }
      }
    ]
  },
]

Page routing jump:

Jump to the secondary page:

Secondary page receiving parameters:

/*
因为我们是直接把参数拼接在二级页面路由的后面,
那么接收的时候就需要通过router.params.name来接收参数
*/
// 引入router
const route = useRoute();

const interfaceName = ref(route.params && route.params.name);

注意:
// params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系
// arams一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容

Click the button to close and return to the previous level:

function handleClose() {
    const obj = { path: "/serviceUse/professial" };
    proxy.$tab.closeOpenPage(obj);
}

==============================================================

The second-level page jumps to the third-level page (use query to pass parameters):

The third-level page receives parameters:

/*
因为我们是直接把参数拼接在二级页面路由的后面,
那么接收的时候就需要通过router.params.name来接收参数
*/
// 引入router
const route = useRoute();

const dayTime = ref(route.query && route.query.time);
const interfaceName = ref(route.query && route.query.interfaceName);

Because we carry parameters when we jump from the second level to the third level, when we click Close to return to the upper level page, we must put the parameters brought by the second level page behind the route, otherwise the second level page will have no parameters (level two The page requests data based on the interface name field passed from the first-level page)

/** 返回按钮操作 */
function handleClose() {
    const obj = { path: `/serviceUse/index/${route.query && route.query.name}` };
    proxy.$tab.closeOpenPage(obj);
}