• 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 这个多层级的树形结构转换为最多两级的树形结构,进而实现了将多级路由转为为二级路由;

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

    
    
    
  • 相关阅读:
    第二十四篇 玩转数据结构——队列(Queue)
    第二十三篇 玩转数据结构——栈(Stack)
    第二十二篇 玩转数据结构——构建动态数组
    第二十一篇 Linux中的环境变量简单介绍
    第二十篇 Linux条件测试语句相关知识点介绍
    第十九篇 vim编辑器的使用技巧
    第十八篇 Linux环境下常用软件安装和使用指南
    第十六篇 nginx主配置文件参数解释
    RAID磁盘阵列是什么(一看就懂)
    如何删除顽固文件或文件夹?
  • 原文地址:https://www.cnblogs.com/teamemory/p/14518352.html
Copyright © 2020-2023  润新知