若依vue3实现基于用户权限动态加载页面，同时传递多个参数

首先说需要实现的功能：点击新增按钮，跳转至新增排班周期的页面，并且将部门ID、工种ID、线路所ID包装进query，通过动态路由传递到上述页面中。

一、新增按钮页面

function handleAddPaiBan(row) {
  reset();
  const buMenID = user.value.deptId;
  const gongZhongID = row.GongZhongID;
  const xianLuSuoID = row.XianLuSuoID;
  router.push({
    path:"/RYQD/BZ-Add/GWBZ/",
    query:{
      buMenID: buMenID,
      gongZhongID: gongZhongID,
      xianLuSuoID: xianLuSuoID
    }
  });
};

二、定义动态路由

在ruoyi-ui\src\router\index.js的dynamicRoutes中定义

{
    path: '/RYQD/BZ-Add/',
    component: Layout,
    hidden: true,
    permissions: ['CZGB'],
    children: [
      {
        path: 'GWBZ',
        component: () => import('@/views/RYQD/PBZQ/GWBZ'),
        name: 'BanZhiAdd',
        query: '{"buMenID": buMenID, "gongZhongID": gongZhongID, "xianLuSuoID": xianLuSuoID}',
        meta: { title: '新增岗位班制', activeMenu: '/RYQD/PBZQ' }
      }
    ]
  },

注意这里的path以及子路由的path要和router.push中的对应，权限字段自己定义，将新页面的前端路径导入到component中，query与router需要传递的参数对应，name与新页面中的脚本名称对应，title是新页面的标题，activemenu是上级路径

<script setup name="BanZhiAdd">

三、获取参数

用route.query获取参数即可，记得导入useRoute函数

const router = useRouter();

const buMenID = route.query.buMenID