Vue 頁面 前進刷新 後退不刷新（keepAlive）

前言

 遇到這一個個問題  須要是這樣的 Vue裏面的不刷新問題

頁面分爲： A 主頁  B列表頁  C 詳情頁

A  beforeRouteLeave 時設置 to.meta.keepAlive = false (A 進入 B頁面時)， 不緩存 B列表頁

B beforeRouteLeave 時 （B -> C）列表頁進詳情頁時 from.meta.keepAlive =true 緩存B列表頁

C詳情頁 返回 B列表頁 ，此時B列表頁緩存不生效，也就是第一次不生效

總結問題緣由：

當進入B列表頁後，keepAlive 爲 true 時，緩存生效

當離開B列表頁時 設置 keepAlive 爲 true  時 ，緩存不生效

這就是很頭疼的問題，查閱相關資料找到

解決

在app.vue 頁面

<transition :name="transitionName">
      <keep-alive>
        <!-- v-if="isRouterALive" :include="[ keepData ]" -->
        <router-view class="child-view" v-if="$route.meta.keepAlive" ></router-view>
      </keep-alive>
    </transition>
    <transition :name="transitionName">
      <router-view class="child-view" v-if="!$route.meta.keepAlive"></router-view>
    </transition>

路由頁面配置：

{
    path: '/activities/create_proto',
    name: 'create_proto',
    meta: {
      index: 2,
      title: '活動建立',
      keepAlive: false, //此組件不須要被緩存
      rank:1,
    },
    component: () =>
      import (/* webpackChunkName: "create_proto" */'@/pages/activities/create_proto')
  },
  {
    path: '/activities/create/:id',
    name: 'create',
    meta: {
      index: 2,
      title: '活動建立',
      keepAlive: true, //此組件不須要被緩存
      isBack:false, //用於判斷上一個頁面是哪一個
      rank:1.5,
    },
    component: () =>
      import (/* webpackChunkName: "create" */'@/pages/activities/create')
  },

  {
    path: '/activities/createMask',
    name: 'createMask',
    meta: {
      index: 2,
      title: '組',
      keepAlive: false, //此組件不須要被緩存
      isBack:false, //用於判斷上一個頁面是哪一個
      rank:1.5,
    },
    component: () =>
      import (/* webpackChunkName: "createMask" */'@/pages/activities/createMask')
  },

View Code

讓B頁面始終是緩存，

而後在B頁面 就是 create頁面 裏：

    beforeRouteEnter(to,from,next){
    //來自editNotic的不緩存
      if(from.name === 'createMask' && to.name === 'create'){
        to.meta.isBack = true;
      }
      next();
    },
    activated() {
    //   console.log(this.$route.meta)
      if(!this.$route.meta.isBack || this.isFirstEnter){
        // 若是isBack是false，代表須要獲取新數據，不然就再也不請求，直接使用緩存的數據
        this.getApi();
      }
      // 恢復成默認的false，避免isBack一直是true，致使下次沒法獲取數據
      this.$route.meta.isBack=false;
      //this.isBack = false;
      this.isFirstEnter = false;
    },
    beforeCreate() {
      this.$loading.open();
    },

    mounted(){
      this.isFirstEnter = true;
      this.getApi();
    },

解釋一波

緩存的頁面 created 會執行只有一次，activated每次都會執行 ，

created 裏面作 第一次 isFirstEnter = true(因爲頁面被緩存，因此一直生效)，以後再activated 裏面作判斷

只有 「不是返回回來的」 和 「第一次進來的」 就刷新數據， 而且要在下面 都設爲false, 以避免緩存各標識不對，

在進入 「列表頁」 時，經過router鉤子函數 beforeRouteEnter作判斷，

詳情頁過來的設 isBack 爲true,即不刷新頁面

 

但第一次都是不生效的，查閱了github 上的大佬方法，就是強制清除B緩存，當B頁面離開去到A頁面，用rank 來比較

在main.js 中 寫入：

Vue.mixin({
  beforeRouteLeave: function (to, from, next) {
    console.log(to)
    if (from && from.meta.rank && to.meta.rank && from.meta.rank > to.meta.rank) { //若是返回上一層，則摧毀本層緩存。
      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();
  },
})

就是強制清除緩存，哇，這個問題搞了半天，

而後就解決了前進刷新，後退不刷的問題，

固然還能夠結合vuex 來作到效果，但數據比較大的話仍是適合 我寫的這種吧，哈哈哈