关于前端:一个插件让你的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 的缓存机制扩大性能，开发者可按本人的需要实现简单的自定义缓存性能

为什么

像原生 app 一样缓存页面
晦涩的 transition 成果
简略易用，插拔式的 keep-alive 插件
轻量级插件，引入后体积只有20k
可嵌套，兼容多级路由下的应用
提供底层的组件，可供不同需要下的自定义扩大

一、装置

代码地址

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	无
immediate	router.onReady 时是否记录路由历史（非必要不能批改）	Boolean	true
useTimestamp	是否应用 timestamp 判断后退后退。启用时，push 和 replace 动作会往页面地址中退出 timestamp 参数，若禁用，将无奈判断以后路由动作。应用`Transition`组件时倡议开启	Boolean	true
componentPrefix	history-keep-alive 组件注册时的前缀，例如传值'base'，应用时即`<base-keep-alive>`	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

<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 属性，详见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

<div id="keepScroll">keepScroll</div>

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 自行设置

<div id="keyformatter">keyFormatter</div>

自定义组件缓存时的 key，雷同 key 的组件会共用缓存，实用于个别须要非凡解决缓存的页面或组件

<div id="historyfilter">historyFilter</div>

依据路由历史过滤不须要缓存的页面

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，心愿应用这个插件可能帮到有雷同需要的同学。