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

我看着这个经手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构建中心组件，用来多级菜单跳转页面。

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中新增以下装备，默许不改写，即需求缓存

export default new Vuex.Store({
  state: {
    // 是否要改写页面-列表页面
    refreshOrderList: false,
  },
  mutations: {
    // 是否要改写页面-列表页面
    setRefreshOrderList(state, payload) {
      state.refreshOrderList = payload;
    },
  },
});

列表页OrderList.vue新增以下装备：

  1. 在离开页面时进行判别：如果目的路由是概况页，则不需求改写页面；不然就需求改写。
  2. 页面被缓存，触发activated时重置页面，包含挑选条件等。
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中修改时就写作：

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组件：

import KeepAliveRouterView from 'keep-alive-router-view';
Vue.use(KeepAliveRouterView);

<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 router.backandrouter.back and router.go to return the page by default, and router.pushandrouter.push and router.replace do not use the cache by default.

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

  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);
  };

插件源代码中写到：

  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（是否默许缓存）

const KeepAliveRouterView = {
  name: 'KeepAliveRouterView',
  props: {
    cache: Boolean,
    include: RegExp,
    exclude: RegExp,
    max: Number,
    name: String,
    defaultCache: Boolean,
  },
}

处理多级路由缓存失效问题

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

处理多级路由缓存失效问题

检查插件源码能够发现，该插件终究烘托出来的结构如下：

<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小时，赶紧趁机带娃出去遛遛。

处理多级路由缓存失效问题