vue 後退不刷新頁面

使用 this.$router.push({path: '/aichat'})路由跳轉方式跳轉頁面

要實現 home => chat  chat頁面刷新；

           chat => report, 

          report => chat    chat 頁面不刷新

即從report 返回到 chat chat頁面不刷新 保留原來的記錄

使用 vue.js 提供的動態組件 keep -alive 實現

在App.vue中

　　<keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>

 

在路由 index.js中加 標識 表示此頁面須要緩存：meta: { keepAlive:  true }

{ path:'/aichat/:id',name:'aichat', component: resolve => require(['../components/zixun/aichat'], resolve), meta:{keepAlive: true} },

 

chat頁面

注意：由於這裏是路由跳轉到這個chat頁面，因此這麼處理

 

script裏：

　　　　//生命週期最先
        beforeRouteEnter(to, from, next) {
            //判斷是從哪一個路由過來的 從下面這兩個頁面進來，就爲false即刷新頁面，其餘頁面就爲true，不刷新頁面
            if(from.name ==='zxhome' || from.name === 'home'){
                to.meta.keepAlive = false;
            }else{
                to.meta.keepAlive = true;
            }
            next();
        },

 生命週期 activated只有加了keep-alive 而且後退的時候觸發  

每次將question數據保存到store倉庫，在後退的時候從新刷新當前的數據，不然每次頁面保存的都是首次數據

 　　　　activated(){
            this.question = this.$store.state.question
        },

 

在report頁面

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