乐趣区

关于前端:一个插件让你的Vue项目像原生App一样缓存页面

jiezi

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

退出移动版