背景介绍

在前端日常项目开发中，大家应该都有遇到过这样的需求：当我们在列表页输入条件进行数据筛选时，我们可能需要根据筛选后的结果进入到某一条的详情页，当我们看完详情页内容，再返回列表页，此时我们希望还是之前的筛选结果，包括条件和分页等。

在实际开发中，改变页面导航的路由都会重新匹配页面，初始化页面的数据状态，无法直接达到这种效果。但Vue给我们提供了“秘密武器”-keep-alive，可以实现页面的数据缓存。

其实以前也写过类似的实现页面缓存的方案:Vue-Router 实现前端页面缓存，是通过keep-alive的include属性控制要缓存的页面。但是这种方式不够灵活，一旦缓存了页面，从其他页面（非详情页面）跳入到列表页时数据也不会重新更新，需要在组件路由守卫beforeRouteEnter中去做判断处理，十分麻烦。

因此，经过参考探索，今天来分享一个一劳永逸的实现页面缓存的方案。

实现思路

总体思路：

只要是列表页（需要使用缓存的页面），进入之前，都将其添加到要缓存的页面中，离开列表页时判断新(to)路由是否是该列表页指定的详情页（配置路由时通过 cacheTo 字段来指定），如果不是就清空缓存。

思路分析

根据总体思路，主要分为以下四种情况：

1. from和to都不是列表页
   • 都不需要缓存，清空以前的缓存
2. from和to都是列表页
   • 2.1-如果to不在from的配置中，清空缓存，新增to缓存
   • 2.2-如果to在from的配置中，保留from缓存,新增to缓存
3. to是列表页，from不是
   • 3.1-from不在to的配置中，清空缓存，新增to缓存
   • 3.2-from在to的配置中，不做处理(因为 3.1 已经缓存了 to)
4. from是列表页，to不是
   • 4.1-to不在from的配置中，清空缓存
   • 4.2-to在from的配置中，不做处理（因为 from 已经在 3.1 时缓存）

以上思路就是日常所有的场景，理解起来可能会比较绕，结合实际场景理解就会发现所有情况都已经覆盖到。

具体实现

前置须知

• 在路由表配置中维护一个cacheTo字段，如果配置了该字段就表示该路由为列表页。
• 控制缓存的逻辑，我们单独在一个文件内完成，作为组件单独管理。为了避免include的管理更加简单，就不适用vuex，这里使用Vue.observable。
• 为了避免维护keep-alive的include属性对代码造成侵入，这里使用函数式组件。
• 为了在管理缓存的组件内能获取到to和from，需要在组件内注册一个beforeEach钩子，vue-router的beforeEach钩子是可以重复注册的，按照注册顺序执行。

实现细节

// keep-alive-rorute.js
import Vue from "vue";
/**
 * 创建存储缓存仓库
 */
// 存储需要缓存页面路由
const cacheState = Vue.observable({
  caches: [],
});
// 清理路由缓存
const clearCache = () => {
  if (!cacheState.caches.length) return;
  cacheState.caches = [];
};
// 新增路由缓存
const addCache = (name) => cacheState.caches.push(name);

const defaultHook = (to, from, next) => next();
// 路由进入钩子函数
export const beforeRouterEachHook = (hook = defaultHook) => {
  return (to, from, next) => {
    /**
     * 思路：只要是类列表页，进入之前都将其缓存，离开时判断新路由是否是该类列表页指定的类详情页，如果不是就清除缓存。
     */
    // to页面路由
    const toRouteName = to.name;
    // to页面为列表页时配置的to路由集合
    const toCacheRoutes = (to.meta || {}).cacheTo;
    // to页面是否是列表页
    const isToPageList = toCacheRoutes && toCacheRoutes.length;
    // from页面路由名称
    const fromRouteName = from.name;
    // form页面为列表页时，配置的to页面路由集合
    const fromCacheRoutes = (from.meta || {}).cacheTo;
    // from页面是否是列表页
    const isFromPageList = fromCacheRoutes && fromCacheRoutes.length;

    // 1如果to,from都不是列表页，清除所有缓存
    if (!isToPageList && !isFromPageList) {
      clearCache();
    } else if (isToPageList && isFromPageList) {
      // 2如果to,from都是列表页
      // 如果to列表页在from列表页的配置中就要缓存，否则不用
      if (fromCacheRoutes.indexOf(toRouteName) < 0) {
        clearCache();
      }
      if (to.matched && to.matched.length > 2) {
        // 三级路由时，缓存父子两级路由
        to.matched.map((element) => {
          if (element.name) {
            addCache(element.name);
          }
        });
      } else {
        // 二级路由缓存当前路由
        addCache(toRouteName);
      }
    } else if (isToPageList) {
      // 3如果to是列表页
      // 如果from不在to的配置中，清除所有缓存，同时缓存新路由
      if (toCacheRoutes.indexOf(fromRouteName) < 0) {
        clearCache();
        if (to.matched && to.matched.length > 2) {
          // 三级路由时缓存父子两级路由
          to.matched.map((element) => {
            if (element.name) {
              addCache(element.name);
            }
          });
        } else {
          // 二级路由缓存当前路由
          addCache(toRouteName);
        }
      }
    } else if (isFromPageList) {
      // 4如果from页面是列表页
      // to不在from的配置中清空缓存
      if (fromCacheRoutes.indexOf(toRouteName) < 0) {
        clearCache();
      }
    }
    return hook(to, from, next);
  };
};

// 缓存路由组件
export const KeepAliveRoute = {
  install(Vue) {
    const component = {
      name: "KeepAliveRoute",
      functional: true,
      render(h, params) {
        return h(
          "keep-alive",
          { props: { include: cacheState.caches } },
          params.children
        );
      },
    };
    Vue.component("KeepAliveRoute", component);
  },
};

项目使用

• 在main.js中注册组件并执行缓存逻辑

// main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
// 引入
import { beforeRouterEachHook, KeepAliveRoute } from "./keep-alive-rorute";
// 注册
Vue.use(KeepAliveRoute);
// 路由守卫中执行缓存逻辑
router.beforeEach(beforeRouterEachHook());
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

• 在需要缓存的路由展示区使用缓存组件

// Home.vue
<template>
  <transition name="fade-transform" mode="out-in">
    // 使用缓存组件
    <KeepAliveRoute>
      <router-view></router-view>
    </KeepAliveRoute>
  </transition>
</template>

• 在路由配置表中配置列表页

[
  {
    path: "/list",
    name: "List",
    meta: {
     // 配置需要进入列表页使用缓存数据的页面
      cacheTo: ["Detail"],
    },
    ....
  },
  {
      path: 'detail',
      name: 'Detail',
      ......
  },
];

注意

• 路由配置必须使用name字段，且和对应的组件name对应。
• 支持多层级嵌套的父子路由缓存。只需要在父子组件的router-view外面包上KeepAliveRoute组件即可。

查看更多内容，请关注微信公众号：柒荤捌素