vue三级及三级以上路由 keep-alive 开启缓存失效问题处理

一、失效原因：

如果多级路由的话，一般会有一个空白的router-view页面做为公共的模板充当中间的嵌套路由/页面；当你切换不同的页面，中间公共部分的组件，一会儿缓存，一会儿不缓存，因为是公共组件，导致了

最终的页面缓存失效。

 

二、解决办法：

目前我认为只有将三级路由转为二级路由来解决比较靠谱；

以我自己的项目为例，最终将接口返回的动态路由利用  this.safe.$router.addRoutes（aRouter）, 来进行路由的注册，那么我们就需要在注册之前，将树形结构的三级或更多级转换位二级路由；

具体的转换参考如下代码, 利用两个递归将中间的路由来过滤掉；

function generateFlatRoutes(accessRoutes) {
            let flatRoutes = [];

            for (let item of accessRoutes) {
              let childrenFflatRoutes = [];
              if (item.children && item.children.length > 0) {
                childrenFflatRoutes = castToFlatRoute(item.children, "");
              }

              // 一级路由是布局路由,需要处理的只是其子路由数据
              flatRoutes.push({
                name: item.name,
                path: item.path,
                component: item.component,
                redirect: item.redirect,
                children: childrenFflatRoutes
              });
            }

            return flatRoutes;
}
          /**
           * 将子路由转换为扁平化路由数组（仅一级）
           * @param {待转换的子路由数组} routes
           * @param {父级路由路径} parentPath
           */
 function castToFlatRoute(routes, parentPath, flatRoutes = []) {
            for (let item of routes) {
              if (item.children && item.children.length > 0) {
                if (item.redirect && item.redirect !== 'noRedirect') {
                  flatRoutes.push({
                    name: item.name,
                    path: item.path,
                    redirect: item.redirect,
                    meta: item.meta
                  });
                }
                castToFlatRoute(item.children, parentPath + "/" + item.path, flatRoutes);
              } else {
                flatRoutes.push({
                  name: item.name,
                  path: item.path,
                  component: item.component,
                  meta: item.meta
                });
              }
            }
　　return flatRoutes;
}
let lastAroutes = generateFlatRoutes(aRouter);

 

function generateFlatRoutes(accessRoutes) {
  let flatRoutes = [];

  for (let item of accessRoutes) {
    let childrenFflatRoutes = [];
    if (item.children && item.children.length > 0) {
      childrenFflatRoutes = castToFlatRoute(item.children, "");
    }

    // 一级路由是布局路由,需要处理的只是其子路由数据
    flatRoutes.push({
      name: item.name,
      path: item.path,
      component: item.component,
      redirect: item.redirect,
      children: childrenFflatRoutes
    });
  }

  return flatRoutes;
}

/**
 * 将子路由转换为扁平化路由数组（仅一级）
 * @param {待转换的子路由数组} routes
 * @param {父级路由路径} parentPath
 */
function castToFlatRoute(routes, parentPath, flatRoutes = []) {
  for (let item of routes) {
    if (item.children && item.children.length > 0) {
      if (item.redirect && item.redirect !== 'noRedirect') {
        flatRoutes.push({
          name: item.name,
          path: (parentPath + "/" + item.path).substring(1),
          redirect: item.redirect,
          meta: item.meta
        });
      }
      castToFlatRoute(item.children, parentPath + "/" + item.path, flatRoutes);
    } else {
      flatRoutes.push({
        name: item.name,
        path: (parentPath + "/" + item.path).substring(1),
        component: item.component,
        meta: item.meta
      });
    }
  }

  return flatRoutes;
}

 

以上通过两个递归的函数，将aRouter 这个多层级的树形结构转换为最多两级的树形结构，进而实现了将多级路由转为为二级路由；

具体递归使用还需要根据自己的返回数据进行微调！！！