vue2若依后台管理系统路由自定义参数

最近在新增页面时，手动添加了路由自定义参数：

然后发现手动添加自定义参数会在生成路由表时也将参数添加进去，由此会导致路由出现错误，页面出现404。

为了解决这个问题，我们需要找到项目中生成路由表的文件，对路由进行改造：

// 向后端请求路由数据
        getRouters().then(res => {
         
          //增加一组全屏路由
          var temp = []
          res.data.forEach(menu_item=>{
            if(menu_item.children!=undefined){
              menu_item.children.forEach(ele=>{
                let path = ele.path;
                if (path.includes('?')) {
                  // 只保留'?'前面的部分，并提取查询参数
                  const [pathWithoutQuery, query] = path.split('?');
                  ele.path = pathWithoutQuery;
                  // 将查询参数保留到路由的meta中
                  ele.meta = ele.meta || {};
                  ele.meta.query = query;
              }
                var menu =JSON.parse(JSON.stringify(ele))
                if(menu.path == 'overviewScreen'){
                  menu.path = "/full"+"/" +menu.path
                  menu.name = "full_"+menu.name
                }else{
                  menu.path = "/full"+menu_item.path+"/" +menu.path
                  menu.name = "full_"+menu.name
                }
               
                temp.push(menu)
              })
            }
          })
          const sdata = JSON.parse(JSON.stringify(res.data))

          //添加到非显示路由
          temp.forEach(ele=>{
            res.data.push(ele)
          })

          const rdata = JSON.parse(JSON.stringify(res.data))
          const sidebarRoutes = filterAsyncRouter(sdata)
          const rewriteRoutes = filterAsyncRouter(rdata, false, true)
          rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
          commit('SET_ROUTES', rewriteRoutes)
          commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
          commit('SET_DEFAULT_ROUTES', sidebarRoutes)
          commit('SET_TOPBAR_ROUTES', sidebarRoutes)
          resolve(rewriteRoutes)
        })

使用const [pathWithoutQuery, query] = path.split('?');将路由数据分割成两部分，pathWithoutQuery是我们需要的路由部分，query是我们手动给路由添加的自定义参数，在这里将query保存到路由的ele.meta.query中，方便我们在路由导航守卫那里把自定义的参数给添加到地址栏。

接下来我们找到路由导航守卫文件进行修改，添加代码：

if(to.meta.query){
          // 路由跳转不支持携带自定义参数的跳转，需要分割后再重新添加上去。
          const query = { ...to.query }
        if (typeof to.meta.query === 'string') {
          const metaQueryObject = parseQueryString(to.meta.query);
          Object.assign(query, metaQueryObject);
        }
          next();
          setTimeout(() => {
            const newQuery = {...query}; // 添加自定义参数
            router.replace({ path: to.path, query: newQuery });
            }, 0);
            
        } else {
          next();

      }

//在拦截函数之外添加方法
const parseQueryString = (queryString) => {
  const params = new URLSearchParams(queryString);
  const queryObject = {};
  params.forEach((value, key) => {
    queryObject[key] = value;
  });
  return queryObject;
}

注意1：记得添加setTimeout或者其他异步将参数添加到地址栏，一定要等页面进行跳转后再添加，不然还是会报错出现404.

注意2：若是参数携带了/，如：page=index/home，地址栏会自动将/转换成%2显示，使用地址栏参数时需要注意这一点。

这样子写就能成功的实现跳转页面并且参数也在地址栏中显示，效果图：