@bye_past/vue-keep
介紹
@bye_past/vue-keep可以幫助你實(shí)現(xiàn)前進(jìn)刷新，返回時(shí)之前的頁(yè)面還處于激活的狀態(tài)惧笛，可以像app一樣的體驗(yàn)从媚。哪里需要緩存，把router-view組件使用keep-router-view來替換患整。
安裝
npm install @bye_past/vue-keep
快速上手
在線示例: https://byepasthub.github.io/vue-keep/example/
全局注冊(cè)組件
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
在需要緩存頁(yè)面組件的地方拜效，將 <router-view /> 替換為 <keep-router-view />，可以進(jìn)行嵌套
<template>
<keep-router-view />
</template>
組件 屬性
| props | |
|---|---|
| max | 頁(yè)面最大緩存數(shù)量 |
| exclude | 字符串或正則表達(dá)式并级。任何名稱匹配的組件都不會(huì)被緩存 |
Router 對(duì)象
-
push/replace: 添加銷毀頁(yè)面組件跟是否緩存字段拂檩，分別是destory、cache嘲碧。destory(String|Array): 跳轉(zhuǎn)時(shí)是否要銷毀某些頁(yè)面組件(銷毀全部destory: 'ALL')稻励，參數(shù)為route.name。
cache(Boolean): 跳轉(zhuǎn)到下一個(gè)頁(yè)面是否使用緩存頁(yè)面愈涩，如果cache沒有提供望抽，默認(rèn)跳轉(zhuǎn)都是屬于新頁(yè)面。
// 跳轉(zhuǎn)到 Goods 頁(yè)面履婉，該頁(yè)面屬于新頁(yè)面
$router.push({ name: 'Goods' });
// 跳轉(zhuǎn)到 Cart 頁(yè)煤篙，如果Cart已經(jīng)被緩存過，該頁(yè)面屬于緩存頁(yè)面
$router.replace({ name: 'Cart', cache: true });
// 跳轉(zhuǎn)到 Goods 頁(yè)面 毁腿，刪除 Cart 頁(yè)面組件辑奈，如果 Goods 已經(jīng)被緩存過，該頁(yè)面屬于緩存頁(yè)面
$router.push({ name: 'Goods', destory: 'Cart', cache: true });
// 跳轉(zhuǎn)到 Goods 頁(yè)面 已烤，刪除 Cart鸠窗、User 頁(yè)面組件，如果 Goods 已經(jīng)被緩存過胯究，該頁(yè)面屬于緩存頁(yè)面
$router.push({ name: 'Goods', destory: ['Cart', 'User'], cache: true });
// 跳轉(zhuǎn)到 Goods 頁(yè)面稍计，刪除全部頁(yè)面緩存，該頁(yè)面屬于新頁(yè)面
$router.push({ name: 'Goods', destory: 'ALL', cache: true });
Jump
router.jump是VueKepp跳添加的轉(zhuǎn)方法裕循，某些場(chǎng)景下可以用作替換go臣嚣、forword、back方法剥哑。
jump方法的存在硅则，主要為了提供上面跳轉(zhuǎn)中便捷的銷毀方式，以及跳轉(zhuǎn)緩存頁(yè)面株婴。
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 可以不寫類型
更詳細(xì)的文檔請(qǐng)看這里https://byepasthub.github.io/vue-keep/zh/
