@bye_past/vue-keep
介紹
@bye_past/vue-keep可以幫助你實(shí)現(xiàn)前進(jìn)刷新，返回時(shí)之前的頁面還處于激活的狀態(tài)，可以像app一樣的體驗(yàn)。哪里需要緩存，把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 />，可以進(jìn)行嵌套
<template>
<keep-router-view />
</template>
組件 屬性
| props | |
|---|---|
| max | 頁面最大緩存數(shù)量 |
| exclude | 字符串或正則表達(dá)式。任何名稱匹配的組件都不會(huì)被緩存 |
Router 對象
-
push/replace: 添加銷毀頁面組件跟是否緩存字段，分別是destory、cache。destory(String|Array): 跳轉(zhuǎn)時(shí)是否要銷毀某些頁面組件(銷毀全部destory: 'ALL')，參數(shù)為route.name。
cache(Boolean): 跳轉(zhuǎn)到下一個(gè)頁面是否使用緩存頁面，如果cache沒有提供，默認(rèn)跳轉(zhuǎn)都是屬于新頁面。
// 跳轉(zhuǎn)到 Goods 頁面，該頁面屬于新頁面
$router.push({ name: 'Goods' });
// 跳轉(zhuǎn)到 Cart 頁，如果Cart已經(jīng)被緩存過，該頁面屬于緩存頁面
$router.replace({ name: 'Cart', cache: true });
// 跳轉(zhuǎn)到 Goods 頁面 ，刪除 Cart 頁面組件，如果 Goods 已經(jīng)被緩存過，該頁面屬于緩存頁面
$router.push({ name: 'Goods', destory: 'Cart', cache: true });
// 跳轉(zhuǎn)到 Goods 頁面 ，刪除 Cart、User 頁面組件，如果 Goods 已經(jīng)被緩存過，該頁面屬于緩存頁面
$router.push({ name: 'Goods', destory: ['Cart', 'User'], cache: true });
// 跳轉(zhuǎn)到 Goods 頁面，刪除全部頁面緩存，該頁面屬于新頁面
$router.push({ name: 'Goods', destory: 'ALL', cache: true });
Jump
router.jump是VueKepp跳添加的轉(zhuǎn)方法，某些場景下可以用作替換go、forword、back方法。
jump方法的存在，主要為了提供上面跳轉(zhuǎn)中便捷的銷毀方式，以及跳轉(zhuǎn)緩存頁面。
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ì)的文檔請看這里https://byepasthub.github.io/vue-keep/zh/
