关于前端:一个插件让你的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 （任意一个应用<router-view>的页面）

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

三、Options

四、应用 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

五、高级用法

销毁页面缓存

$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 参数

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