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 這個多層級的樹形結構轉換為最多兩級的樹形結構，進而實現了將多級路由轉為為二級路由；

具體遞歸使用還需要根據自己的返回數據進行微調！！！