@bye_past/vue-keep
介绍
@bye_past/vue-keep可以帮助你实现前进刷新，返回时之前的页面还处于激活的状态，可以像app一样的体验。哪里需要缓存，把router-view组件使用keep-router-view来替换。
安装
npm install @bye_past/vue-keep
快速上手
在线示例: https://byepasthub.github.io/vue-keep/example/
全局注册组件
KeepRouteView
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');
App.vue
在需要缓存页面组件的地方，将 <router-view /> 替换为 <keep-router-view />，可以进行嵌套
<template>
<keep-router-view />
</template>
组件 属性
| props | |
|---|---|
| max | 页面最大缓存数量 |
| exclude | 字符串或正则表达式。任何名称匹配的组件都不会被缓存 |
Router 对象
-
push/replace: 添加销毁页面组件跟是否缓存字段，分别是destory、cache。destory(String|Array): 跳转时是否要销毁某些页面组件(销毁全部destory: 'ALL')，参数为route.name。
cache(Boolean): 跳转到下一个页面是否使用缓存页面，如果cache没有提供，默认跳转都是属于新页面。
// 跳转到 Goods 页面，该页面属于新页面
$router.push({ name: 'Goods' });
// 跳转到 Cart 页，如果Cart已经被缓存过，该页面属于缓存页面
$router.replace({ name: 'Cart', cache: true });
// 跳转到 Goods 页面 ，删除 Cart 页面组件，如果 Goods 已经被缓存过，该页面属于缓存页面
$router.push({ name: 'Goods', destory: 'Cart', cache: true });
// 跳转到 Goods 页面 ，删除 Cart、User 页面组件，如果 Goods 已经被缓存过，该页面属于缓存页面
$router.push({ name: 'Goods', destory: ['Cart', 'User'], cache: true });
// 跳转到 Goods 页面，删除全部页面缓存，该页面属于新页面
$router.push({ name: 'Goods', destory: '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 可以不写类型
更详细的文档请看这里https://byepasthub.github.io/vue-keep/zh/
