一个插件让你的Vue项目像原生App一样缓存页面

history-keep-alive

前言：在Vue中，keep-alive是根据组件名缓存组件，但我们平时更多的需求是缓存页面，比如A、B页面都使用了C组件，希望缓存A页面，不缓存B页面，用keep-alive组件就不好实现。如果只需要安装一个插件，没有任何累赘的代码，就能实现页面级的缓存，并且能够根据路由历史判断是否缓存当前页面，让你的项目像原生App一样流畅，你是否想试一试呢？

DEMO（建议在设备模拟下查看）

在线预览

history-keep-alive

history-transition

demo 项目地址

是什么

像原生 app 一样根据路由历史缓存页面的 vue 插件，基于 vue 的缓存机制扩展功能，开发者可按自己的需求实现复杂的自定义缓存功能

为什么

1. 像原生 app 一样缓存页面
2. 流畅的 transition 效果
3. 简单易用，插拔式的 keep-alive 插件
4. 轻量级插件，引入后体积只有20k
5. 可嵌套，兼容多级路由下的使用
6. 提供底层的组件，可供不同需求下的自定义扩展

一、安装

代码地址

npm i history-keep-alive -S

或

yarn add history-keep-alive

二、使用

基础使用

index.js（项目入口文件）

import Vue from "vue";
import router from "./router"; // vue-router 实例
import HistoryKeepAlive from "history-keep-alive";

Vue.use(HistoryKeepAlive, { router });
// 启动你的应用...

index.vue （任意一个使用的页面）

三、Options

参数	描述	类型	默认值
router	必传，vue-router 实例	VueRouter	无
immediate	router.onReady 时是否记录路由历史（非必要不能修改）	Boolean	true
useTimestamp	是否使用 timestamp 判断前进后退。启用时，push 和 replace 动作会往页面地址中加入 timestamp 参数，若禁用，将无法判断当前路由动作。使用Transition组件时建议开启	Boolean	true
componentPrefix	history-keep-alive 组件注册时的前缀，例如传值'base'，使用时即	String	'history'
defaultTransitionName	Transition组件默认的过渡效果	String	'slide'

四、使用 Transition 组件

提供原生 app 般流畅的过渡效果

index.js

import { Transition } from "history-keep-alive";
import router from "./router"; // vue-router 实例
import HistoryKeepAlive from "history-keep-alive";

Vue.use(HistoryKeepAlive, { router });
// 启动你的应用...

index.vue

history-keep-alive / Transition 组件 props

props	描述	类型	默认值
aliveRef	设置的 ref 属性，详见keepScroll	String	无
keepAlive	是否缓存页面	Boolean	false
max	缓存页面个数上限	Number	10
keyFormatter	自定义 keep-alive 的 key 的处理器，详见keyFormatter	Function	() => {}
historyFilter	自定义 keep-alive 的 history 的过滤器，详见historyFilter	Function	null

五、高级用法

销毁页面缓存

$routerHistoryInstance.destroy

// 通过path销毁相应页面缓存
// 使用时请避免销毁当前页面的缓存，以免引起页面渲染问题
destroyByPath() {
  const res = this.$routerHistoryInstance.destroy({ path: '/home/list' });
  // res为true表示销毁成功，否则销毁失败
},

$routerHistoryInstance.destroyAll

// 销毁所有页面缓存
// destroyAll方法不会销毁当前页面的缓存
destroyAll() {
  this.$routerHistoryInstance.destroyAll();
}

注：销毁页面缓存的 demo 参见下方链接

demo

keepScroll

keep-scroll-plugin-target：约定好的 id，要使用 keepScroll 功能就要给滚动元素设置这个 id

index.vue（父页面）

index.vue（子页面，例如：route-name: keep-scroll）

route.js（配置子页面路由）

export default [
  ......
  {
    path: "/keep-scroll",
    name: "keep-scroll",
    component: KeepScroll,
    meta: {
      keepScroll: true, // 设置keepScroll参数
    },
  },
];

注：body 滚动的页面无法使用，请自行实现

routes meta 参数

参数	描述	类型	默认值
aliveKey	嵌套使用时，想要在不同页面复用相同的父级组件，就要设置一个唯一的值	String	无
nocache	是否禁用缓存	Boolean	无
transitionName	设置页面的 transition 效果，可选值[slide, zoom, fade, fade-transform]	String	无
keepScroll	启用页面的 keep scroll 功能	Boolean	无

demo

更多功能参数，可通过 keyFormatter 和 keyFormatter 自行设置

keyFormatter

自定义组件缓存时的 key，相同 key 的组件会共用缓存，适用于个别需要特殊处理缓存的页面或组件

historyFilter

根据路由历史过滤不需要缓存的页面

keyFormatter/historyFilter 的使用

index.vue

底层 keep-alive 的使用

如果以上配置仍不能满足需求，可使用组件（已由插件注册到 VueComponents 中）自行实现缓存的逻辑，详情可参考history-keep-alive

写在最后

这个插件产出于日常的需求，可能有考虑不周的地方，有任何问题欢迎与我交流，邮箱[email protected]，希望使用这个插件能够帮到有相同需求的同学。