解決keepAlive緩存bug

vue keepAlive移除緩存(代替this.$destroy())

需求

註冊頁面有一個，點擊去查看協議的入口，此時當客戶填寫了數據，從協議頁面回來以後數據就會清空，因此我選擇了用keepAlive，可是用第一種方式發現緩存的始終都是第一次填寫的東西，若是用this.$destroy()就不再能緩存了，因此通過多方探查，用了第二種方案完美解決。

router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router) 
export default new Router({
    routes: [{
            path: '/register',
            name: 'register',
            component: resolve => require(['@/pages/sign/register.vue'], resolve),
            meta: {
                keepAlive: true, // 此組件須要被緩存
            }
        }]
複製代碼

1.第一種方案

beforeRouteLeave(to, from, next) {
    if (to.name === "useAgreement") {
      from.meta.keepAlive = true; //當咱們進入到C時開啓B的緩存
      next();
    } else {
      from.meta.keepAlive = false;
      this.$destroy()
      next(); //當咱們前進的不是C時咱們讓B頁面刷新
    }
  },
複製代碼

2.第二種方案：在路由跳轉裏動態判斷移除緩存

使用Vue.mixin的方法攔截了路由離開事件，並在該攔截方法中實現後退時銷燬頁面緩存。

// 使用Vue.mixin的方法攔截了路由離開事件，並在該攔截方法中實現了銷燬頁面緩存的功能。
    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. 用包含關係來判斷 通用
            console.log(to, from)
            if (to.path.indexOf('useAgreement') != -1 && from.name == 'register') {
                from.meta.keepAlive = true;
            } else {
                    // if (from && from.meta.tag && to.meta.tag && (from.meta.tag-to.meta.tag<1)){
                if (this.$vnode && this.$vnode.data.keepAlive && from.name == 'register' && to.path.indexOf('home') != -1) {
                    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]
                            }
                        }
                    }
                    from.meta.keepAlive = true;
                }
                // this.$destroy()
            }
            next()
        }
    })
複製代碼

參考連接1

參考連接2