VueKeep

快速上手

注册使用

main.js

import Vue from 'vue';
import keep from '@bye_past/vue-keep'
import App from './App.vue';
import router from './router';

Vue.use(keep, router)

new Vue({
  router,
  render: (h) => h(App)
}).$mount('#app');

import { createApp } from 'vue';
import keep from '@bye_past/vue-keep'
import router from './router/index';
import App from './App.vue';

const app = createApp(App);
app.use(router);
app.use(keep, router);
app.mount('#app');

App.vue

提示

在需要缓存页面组件的地方，将 <router-view /> 替换为 <keep-router-view />

<template>
  <keep-router-view />
</template>

组件属性

max (Number)页面最大缓存数量 (default: 5)
exclude (Array | String)字符串或正则表达式。任何名称匹配的组件都不会被缓存

Router 对象

  • Route: 添加(销毁/缓存)页面组件属性，分别是destroy、cache、constCache。

    destroy(String|Array): 跳转时是否要销毁某些页面组件(销毁全部destroy: 'ALL')，参数为route.name。 cache(Boolean): 跳转到下一个页面是否使用缓存页面，如果cache没有提供，默认跳转都是属于新页面。 constCache(Boolean): constCache跟cache最大的区别是cache可以被动态改变的，constCache是跳转是强制缓存，一般是配合beforeEach做高度定制化缓存使用的。(v1.2.1)

// 跳转到 Goods 页面，该页面属于新页面
$router.push({ name: 'Goods' });

// 跳转到 Cart 页，如果Cart已经被缓存过，该页面属于缓存页面
$router.replace({ name: 'Cart', cache: true });

// 跳转到 Cart 页，如果Cart已经被缓存过，该页面属于缓存页面
$router.replace({ name: 'Cart', cache: false, constCache: true });

// 跳转到 Goods 页面 ，删除 Cart 页面组件，如果 Goods 已经被缓存过，该页面属于缓存页面
$router.push({ name: 'Goods', destroy: 'Cart', cache: true });

// 跳转到 Goods 页面 ，删除 Cart、User 页面组件，如果 Goods 已经被缓存过，该页面属于缓存页面
$router.push({ name: 'Goods', destroy: ['Cart', 'User'], cache: true });

// 跳转到 Goods 页面，删除全部页面缓存，该页面属于新页面
$router.push({ name: 'Goods', destroy: 'ALL', cache: true });

Jump

router.jump是VueKepp跳添加的转方法，某些场景下可以用作替换go、forword、back方法。

jump方法的存在，主要为了提供上面跳转中便捷的销毁方式，以及跳转缓存页面。

router.jump({ type: 'forword', cache: true }); // forword
router.jump({ type: 'back', cache: true }); // back
router.jump(-1, { type: 'go', cache: true }); // go
router.jump(-1, { cache: true}); // go 可以不写类型

关于 destroy