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

846 阅读4分钟

history-keep-alive

npm npm

前言:在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 (任意一个使用<router-view>的页面)

<template>
  <div>
    <!-- 替换<router-view> -->
    <history-keep-alive />
  </div>
</template>

三、Options

参数描述类型默认值
router必传,vue-router 实例VueRouter
immediaterouter.onReady 时是否记录路由历史(非必要不能修改)Booleantrue
useTimestamp是否使用 timestamp 判断前进后退。启用时,push 和 replace 动作会往页面地址中加入 timestamp 参数,若禁用,将无法判断当前路由动作。使用Transition组件时建议开启Booleantrue
componentPrefixhistory-keep-alive 组件注册时的前缀,例如传值'base',使用时即<base-keep-alive>String'history'
defaultTransitionNameTransition组件默认的过渡效果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

<template>
  <div>
    <!-- 替换<router-view> -->
    <history-transition keep-alive />
  </div>
</template>
<script>
import { Transition } from  'history-keep-alive'
export default {
  components: {
    'history-transition': Transition,
  }
  ...
}
</script>

history-keep-alive / Transition 组件 props

props描述类型默认值
aliveRef设置<router-view>的 ref 属性,详见keepScrollString
keepAlive是否缓存页面Booleanfalse
max缓存页面个数上限Number10
keyFormatter自定义 keep-alive 的 key 的处理器,详见keyFormatterFunction() => {}
historyFilter自定义 keep-alive 的 history 的过滤器,详见historyFilterFunctionnull

五、高级用法

销毁页面缓存

$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(父页面)

<template>
  <div>
    <history-keep-alive alive-ref="view" />
  </div>
</template>

index.vue(子页面,例如:route-name: keep-scroll)

<template>
  <div id="keep-scroll-plugin-target">...</div>
</template>

route.js(配置子页面路由)

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

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

routes meta 参数

参数描述类型默认值
aliveKey嵌套使用<history-keep-alive>时,想要在不同页面复用相同的父级组件,就要设置一个唯一的值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

<template>
  <div>
    <history-kee-alive
      :key-formatter="formatter"
      :history-filter="historyFilter"
    />
  </div>
</template>
<script>
export default {
  methods: {
    /**
     * @param {Route} route 路由历史地址匹配到的路由信息
     * @param {Number} depth 当前组件所在的层级
     */
    formatter(route, depth) {
      // return aliveKey you want
    }
    /**
     * @param {Route} route 路由历史地址匹配到的路由信息
     * @param {Number} depth 当前组件所在的层级
     * @return {Boolean} 希望被过滤的路由历史返回false,否则返回true
     */
    historyFilter(route, depth) {
      // return Boolean
    }
  }
  ...
}
</script>

底层 keep-alive 的使用

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

写在最后

这个插件产出于日常的需求,可能有考虑不周的地方,有任何问题欢迎与我交流,邮箱barrier.yang@outlook.com,希望使用这个插件能够帮到有相同需求的同学。