Vue 页面如何像App一样前进刷新，上一个页面保持缓存？

@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
在需要缓存页面组件的地方，将 替换为 ，可以进行嵌套

组件 属性

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/

tips: 觉得还不错给个Star吧，你的支持就是我的动力➡️