解决多级路由缓存失效问题

LJINGER2023-12-10 11:28

复工当天接到了第一个迭代需求：优化。领导说优化代码、优化功能，优化什么都可以，大家自己提需求。真是瞌睡遇到枕头，我正愁最近思考什么问题，这不就来了嘛。

我看着这个经手3人、迭代3年的项目不禁感叹，只要心态够稳，缝缝补补就又是三年。曾经做过的不少功能经过修改调整最后删除，现在这个项目和3年前的第一个迭代大不一样了，当然，雷点也到处都是。

今天主要说说其中一个雷点------多级路由缓存（以下内容针对vue2）。

一、简单的需求

网站包含注册登录页面、多级菜单、面包屑、内容页和详情页等，基础布局如下：

菜单之间跳转不需要页面缓存，从详情返回上一页时需要缓存（即保留父页面的内容，包括筛选条件、页码等所有东西）。比如：

  1. 首页进入列表页，再返回首页（被缓存）；
  2. 首页进入列表页，再进入详情页，再返回列表页（被缓存），再返回首页（被缓存）、此时列表页被清空.

接到需求后我最初的想法："这很简单嘛，多么合理的需求啊，动态控制keep-alive组件就行了，需求分分钟解决。"

keep-alive用法可以参考：vuejs.org/guide/built...

只能说，想法很美好，现实很打脸。开发中keep-alive缓存时灵时不灵，总在我认为问题解决了的时候拉闸。

二、问题分析

布局

系统包含了多种布局，有的页面（注册、登录、中间组件等页面）用了空白的模板页（只需要路由跳转）；有的页面（登录之后的内容页）用了有内容的布局。如下所示：

空白模板 复制代码 
<template>
  <div class="blank_layout">    
    <router-view></router-view>    
  </div>
</template>
有内容的模板 复制代码 
<template>
  <div id="BasicLayout" class="basic_layout">
    <!-- 公共头部  -->
    <ComHeader />
    <div class="content-box">
      <!-- 左侧菜单 -->
      <ComMenu />
      <!-- 右侧内容 -->
      <div class="right_x">
        <!-- 面包屑 -->
        <ComBreadcrumb />
        <!-- 一级菜单和二级菜单点击出现的页面 -->
        <div class="main_x">
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
          </keep-alive>
          <router-view v-if="!$route.meta.keepAlive"></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

路由

页面上有多级菜单栏，router文件中也存在多级路由，所以页面上的菜单栏和面包屑就可以根据route路径直接渲染。

路由文件中用BlankLayout构建中间组件，用来多级菜单跳转页面。

router.js 复制代码 
const asyncRouterMap = {
  path: "/",
  component: () => import("@/views/layouts/BasicLayout"),
  children: [
    {
      name: "Home",
      path: "",
      component: () => import("@/views/Home.vue"),
      meta: {
        title: "首页",
        keepAlive: false // 不需要缓存
      }
    },
    {
      name: "About",
      path: "about",
      component: () => import("@/views/About.vue"),
      meta: {
        title: "关于",
        keepAlive: true // 需要缓存
      }
    },
    {
      name: "List",
      path: "",
      component: () => import("@/views/layouts/BlankLayout"),
      children: [
        {
          name: "List1",
          path: "list/1",
          component: () => import("@/views/List1.vue"),
          meta: {
            title: "列表1",
            keepAlive: true
          }
        },
        {
          name: "List2",
          path: "list/2",
          component: () => import("@/views/List2.vue"),
          meta: {
            title: "列表2",
            keepAlive: false
          }
        },
        {
          name: "List3",
          path: "",
          component: () => import("@/views/layouts/BlankLayout"),
          children: [
            {
              name: "List3-1",
              path: "list/3/1",
              component: () => import("@/views/List3-1.vue"),
              meta: {
                title: "详情3-1",
                keepAlive: false
              }
            }
          ]
        }
      ]
    }
  ]
}

问题排查

我按照官网规规矩矩的使用keepAlive，但就是不生效。查了各种资料，也看了网上很多失效情况，比如：

  1. keepAlive内部只能有一个直属组件，等同于template
  2. keepAlive直属组件中用了v-for
  3. include、exclude的写法不符合规范
  4. 组件没有name，或者include、exclude中写的name和组件name没匹配上（是组件自身的name，而不是router文件中的name）
  5. 不同路由指向了同一个组件（name相同），这里可以看看keep-alive的源代码

keep-alive的实现原理，文件位置：/src/core/components/keep-alive.js

以上情况都排除后，终于发现了问题：

路由嵌套导致存在了多层router-view，进而导致了keep-alive失效。

三、问题解决

方案一：多级路由变一级路由（排除）

router文件中使用单级路由，即所有路由都平铺，这样就只会存在一个router-view。

缺点：

  1. router由树结构变成了扁平结构，不能一眼看出菜单的层级关系。
  2. 菜单栏不能直接从route中获取，要自己另外写。
  3. 面包屑不能直接从route.matched里面获取，要自己一层一层封装。

方案二：增加字段判断父页面是否从详情页面返回，以决定是否需要刷新页面（最终落实）

在store.js中新增以下配置，默认不刷新，即需要缓存

store.js 复制代码 
export default new Vuex.Store({
  state: {
    // 是否要刷新页面-列表页面
    refreshOrderList: false,
  },
  mutations: {
    // 是否要刷新页面-列表页面
    setRefreshOrderList(state, payload) {
      state.refreshOrderList = payload;
    },
  },
});

列表页OrderList.vue新增以下配置：

  1. 在离开页面时进行判断：如果目的路由是详情页，则不需要刷新页面；否则就需要刷新。
  2. 页面被缓存，触发activated时重置页面，包括筛选条件等。
OrderList.vue 复制代码 
beforeRouteLeave(to, from, next) {
    if (to.name == "OrderDetail") {
      this.$store.commit("setRefreshOrderList", false);
    } else {
      this.$store.commit("setRefreshOrderList", true);
    }
    next();
},
activated() {
    // 刷新页面，重置数据
    if (this.$store.state.refreshOrderList) {
      this.pageSize = 10;
      this.toSearch();
    }
},
mounted() {
    this.setData();
},

也可以把store.js中的refreshOrderList写在router.js的meta中，和keepAlive同级，相对应的，OrderList.vue中修改时就写作：

OrderList.vue 复制代码 
beforeRouteLeave(to, from, next) {
    if (to.name == "OrderDetail") {
      from.meta.refreshOrderList = false;
    } else {
      from.meta.refreshOrderList = true;
    }
    next();
},
......

缺陷： 从父页面跳到需要缓存的子页面时，会触发父页面的mounted

四、新的实现方法

引入keep-alive-router-view插件，该插件内部封装了keep-alive和router-view。

1. 使用方法

全局注册keep-alive-router-view组件，用keep-alive-router-view代替keep-alive组件：

main.js 复制代码 
import KeepAliveRouterView from 'keep-alive-router-view';
Vue.use(KeepAliveRouterView);
BasicLayout.vue 复制代码 
<template>
  <div id="BasicLayout" class="basicLayout">
    <!-- 公共头部  -->
    <ComHeader />
    <div class="content-box">
      <!-- 左侧菜单 -->
      <ComMenu />
      <!-- 右侧内容 -->
      <div class="rightBox">
        <!-- 面包屑 -->
        <ComBreadcrumb />
        <!-- 一级菜单和二级菜单点击出现的页面 -->
        <div class="mainBox">
          <keep-alive-router-view :cache="$route.meta.keepAlive" :defaultCache="true" />
        </div>
      </div>
    </div>
  </div>
</template>

2. 具体分析

官网上写到（默认情况下，当您操作$router.back和$router.go返回页面时，它会使用缓存，而$router.push和$route.replace默认情况下不使用缓存。）：

It uses the cache when you operate <math xmlns="http://www.w3.org/1998/Math/MathML"> r o u t e r . b a c k a n d router.back and </math>router.backandrouter.go to return the page by default, and <math xmlns="http://www.w3.org/1998/Math/MathML"> r o u t e r . p u s h a n d router.push and </math>router.pushandrouter.replace do not use the cache by default.

vue-router中的push、replace、go、back、forward方法写法如下：

vue-router.js 复制代码 
  VueRouter.prototype.push = function push (location, onComplete, onAbort) {
      var this$1$1 = this;

    // $flow-disable-line
    if (!onComplete && !onAbort && typeof Promise !== 'undefined') {
      return new Promise(function (resolve, reject) {
        this$1$1.history.push(location, resolve, reject);
      })
    } else {
      this.history.push(location, onComplete, onAbort);
    }
  };

  VueRouter.prototype.replace = function replace (location, onComplete, onAbort) {
      var this$1$1 = this;

    // $flow-disable-line
    if (!onComplete && !onAbort && typeof Promise !== 'undefined') {
      return new Promise(function (resolve, reject) {
        this$1$1.history.replace(location, resolve, reject);
      })
    } else {
      this.history.replace(location, onComplete, onAbort);
    }
  };
  
  VueRouter.prototype.go = function go (n) {
    this.history.go(n);
  };

  VueRouter.prototype.back = function back () {
    this.go(-1);
  };

  VueRouter.prototype.forward = function forward () {
    this.go(1);
  };

插件源代码中写到：

插件的main.js 复制代码 
  wrap(router) {
    const { push, go, replace } = router;

    router.push = function(...args) {
      const location = args[0];

      if (checkSetCache(location)) {
        setCache(location);
      } else {
        wrapRouter.setKeepAlive(wrapRouter.getDefaultCached());
      }
      return push.apply(this, args);
    };
    router.replace = function(...args) {
      const location = args[0];

      if (checkSetCache(location)) {
        setCache(location);
      } else {
        wrapRouter.setKeepAlive(wrapRouter.getDefaultCached());
      }
      return replace.apply(this, args);
    };
    router.back = function(options = { cache: true }) {
      wrapRouter.setKeepAlive(!!options.cache);
      return go.apply(this, [-1, { cache: !!options.cache }]);
    };
    router.forward = function(options = { cache: true }) {
      wrapRouter.setKeepAlive(!!options.cache);
      return go.apply(this, [1, { cache: !!options.cache }]);
    };
    router.go = function(num, options = { cache: true }) {
      wrapRouter.setKeepAlive(!!options.cache);
      return go.apply(this, [num]);
    };
  }

再对比vue的keep-alive可以发现，该插件多了三个props：cache（是否缓存）、name（缓存的组件的名称）、defaultCache（是否默认缓存）

插件的main.js 复制代码 
const KeepAliveRouterView = {
  name: 'KeepAliveRouterView',
  props: {
    cache: Boolean,
    include: RegExp,
    exclude: RegExp,
    max: Number,
    name: String,
    defaultCache: Boolean,
  },
}

官网说到，插件的cache属性和$router接口的cache参数决定了页面是否使用缓存。

查看插件源码可以发现，该插件最终渲染出来的结构如下：

main.js 复制代码 
<div class="keep-alive-cache">
  <keep-alive :include="include" :exclude="exclude" :max="max">
    <router-view v-if="this.cache" ref="cachedPage" :name="name" :key="fullPath">
    </router-view>
  </keep-alive>
  <router-view v-if="!this.cache" ref="cachedPage" :name="name">
  </router-view>
</div>

事情发展到这里，我还是有点疑惑，keep-alive在多级路由嵌套时会失效，但keep-alive-router-view插件不会，到底是哪个地方解决的这个问题呢？

源码看得一知半解，实在是惭愧，给自己留个作业，这块疑惑以后补上。也欢迎大佬指导。

写在最后，最近的天气真是糟糕，周末两天都是严重污染，几十个小时只有2小时空气质量为良，还好我一直刷天气预报，逮到了这2小时，赶紧趁机带娃出去遛遛。

相关推荐
阿芯爱编程27 分钟前
最长和谐子序列，滑动窗口
前端·javascript·面试
你脸上有BUG1 小时前
Css实现悬浮对角线边框动效
前端·css·动画
烛阴1 小时前
开发者神器：如何在浏览器控制台玩转第三方库，让调试效率翻倍！
前端·javascript
crary,记忆1 小时前
Module Federation 和 Native Federation 的比较
前端·webpack·angular
why技术1 小时前
翻译翻译，什么叫“编程专用”的显示器？
前端·后端
拉不动的猪2 小时前
JQ常规面试题
前端·javascript·面试
海上彼尚2 小时前
Monorepo + PNPM 搭建高效多项目管理
前端·js·源代码管理
Random_index2 小时前
#Uniapp篇：chrome调试&&unapp适配
前端·chrome·uni-app
Shimeng_19893 小时前
前端如何通过（手机）扫描二维码下载app
前端·javascript·vue.js·二维码·扫描二维码下载软件app
热门推荐
01DeepSeek各版本说明与优缺点分析02【图像处理与机器视觉】XJTU期末考点03KGG转MP3工具|非KGM文件|解密音频04Coze扣子平台完整体验和实践（附国内和国际版对比）05从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑06YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】07R-tree详解08海康Visionmaster-常见问题排查方法-启动阶段09【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！10零代码入门 | Coze——让大模型接入自己的数据库