接上篇?https://www.cnblogs.com/wangmaoling/p/9803960.html

本文很長，請耐心看完分析。

4.高級用法，指定從什么組件進入才緩存，以及銷毀緩存：先介紹我發(fā)現(xiàn)的網(wǎng)上一些博主寫的有bug的方法，在介紹自己的方法。?

假設這里有 3 個路由： A、B、C。要求：

　　1.? ?默認顯示 A? ??

　　2.? B 跳到 A，A 不刷新?

　　3.? C 跳到 A，A 刷新

先上一些發(fā)現(xiàn)博客上有些博主寫的實現(xiàn)方式：

方式1：有bug

　　在 A 路由里面設置?meta?屬性：

{path: '/',name: 'A',component: A,meta: {keepAlive: true // 需要被緩存} }

　　在 B 組件里面設置?beforeRouteLeave：

export default {data() {return {};},methods: {},beforeRouteLeave(to, from, next) {// 設置下一個路由的 metato.meta.keepAlive = true; // 讓 A 緩存，即不刷新next();} };

　　在 C 組件里面設置?beforeRouteLeave：

export default {data() {return {};},methods: {},beforeRouteLeave(to, from, next) {// 設置下一個路由的 metato.meta.keepAlive = false; // 讓 A 不緩存，即刷新next();} };

　　這樣便能實現(xiàn) B 回到 A，A 不刷新；而 C 回到 A 則刷新。但是問題來了：

　　　　1. 只要是從C到了A（A即為false）,A在到B的時候也是false,B返回A后A才變?yōu)閠rue。

　　　　　　這個方法沒弄明白，true跟緩存的關系，只有首先設置了true才可以被緩存，而不是后設置true讓他緩存下。

　　　　2. 如果是多頁面就麻煩了，每個組件都得寫，并且還不知道，to的組件是什么。

方式2：有bug - $destroy()銷毀后就永遠不會被緩存了?

//在router的js里面 加上全局
Vue.mixin({beforeRouteLeave: function (to, from, next) {// 省略若干代碼this.$destroy();next();}} })

方式3：有bug。比較暴力的方法，已經(jīng)很好的方法，根據(jù)源碼看來緩存的組件都會設置一個cache屬性，可以通過代碼強行移除掉。缺點就是沒有徹底銷毀依舊占內存。

　　

　　

　　路由設置：

　　

　　公共組件設置：

　　

　　實現(xiàn)：

Vue.mixin({beforeRouteLeave: function (to, from, next) {// 默認是緩存的 在來清除// 1.用tag標記控制 判斷上下級// if (from && from.meta.tag && to.meta.tag && (from.meta.tag-to.meta.tag<1))// 2.直接用組件名字來寫 不夠通用// if (from.path == '/docMng' && to.path == '/docMng/docDetail') {// 3. 用包含關系來判斷 通用if(to.path.indexOf(from.path)!=-1){}else{// if (from && from.meta.tag && to.meta.tag && (from.meta.tag-to.meta.tag<1)){if (this.$vnode && this.$vnode.data.keepAlive) {if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache) { if (this.$vnode.componentOptions) { var key = this.$vnode.key == null ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '') :this.$vnode.key; var cache = this.$vnode.parent.componentInstance.cache; var keys = this.$vnode.parent.componentInstance.keys; if (cache[key]) { if (keys.length) { var index = keys.indexOf(key); if (index > -1) { keys.splice(index, 1); } } delete cache[key]; } } } } this.$destroy(); // } } next() } })

?　　此方法可以用了下面說下問題：

　　從A組件的詳情（A1）直接跳到另一個組件（B），然后在從B到A會發(fā)現(xiàn)A沒有刷新，按道理是需要刷新的。

?

方式4：比較好的解決方法，用到了keep-alive的 include屬性。通過vuex動態(tài)控制include達到可緩存狀態(tài)。

　　思路：一般設置緩存就是 從A1->A2 這個過程A1需要設置緩存，A1->B1一般是不需要的（tab切換暫不考慮，以后可能會在分析設計）。

　　　　通過vuex要緩存的組件存起來加載到include,來動態(tài)控制include。下面上項目截下來的圖：

　　步驟一路由設置：我這里是用層級表示的路由。這里如果不用層級可以用標記來表示例如：tag1.0 tag1.1 tag1.2? ? ?tag2.... 用這個方法來表示的時候需要多處理一　? 下，這里不做分析了

　　

　　步驟二vuex設置

　　

　　步驟三組件內設置在公共main設置觀察屬性include屬性。

　　

　　步驟四在路由里面進行攔截

　　

?　

　　

轉載于:https://www.cnblogs.com/wangmaoling/p/9826063.html

總結

以上是生活随笔為你收集整理的vue keep-alive保存路由状态2 (高级用法,接上篇)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。