在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ keep-alive在路由鉤子設(shè)置緩存或者不緩存如有 3 個路由 A、B、C，

keep-alive在路由鉤子設(shè)置緩存或者不緩存如有 3 個路由 A、B、C， B 跳到 A，A 不刷新 C 跳到 A，A 刷新

Vue中keep-alive在路由鉤子設(shè)置緩存或者不緩存如有 3 個路由 A、B、C， B 跳到 A，A 不刷新 C 跳到 A，A 刷新
我在網(wǎng)上找的代碼第一次的時候沒有效果，但是之后就正常了，不知道什么原因?qū)е碌?br>router

clipboard.png

App.vue

clipboard.png

             <keep-alive>
                        <router-view v-if="$route.meta.keepAlive">
                            <!-- 這里是會被緩存的視圖組件，比如 Home！ -->
                        </router-view>
                    </keep-alive>
                    <router-view v-if="!$route.meta.keepAlive">
                        <!-- 這里是不被緩存的視圖組件，比如 Edit！ -->
                    </router-view>

在C中 C 到 A A刷新
clipboard.png

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

B到A A不刷新

clipboard.png

    beforeRouteLeave(to, from, next) {
                to.meta.keepAlive = true;  // 讓 A 緩存，即不刷新
               next();
  }

為什么第一次沒有效果 之后就正常了呢？ 請求怎么解決呢？

回答
編輯回答
糖豆豆

我之前也遇到了類似的問題
記錄了一下你可以看看

鏈接

2018年1月3日 14:35
編輯回答
青檸

我也有同樣的問題，解決了嗎？
（個人猜想1 因為有兩個 router-view ， 第一次加載下面的不緩存，而緩存的里面卻沒有，只有加載一次緩存的頁面后，才會有）
（個人猜想2 是因為設(shè)置keep-alive的時機(jī)已經(jīng)晚了。當(dāng)導(dǎo)航已經(jīng)知道要去B頁面后，此時再設(shè)置是否緩存B已經(jīng)晚了，只會再下次生效了。）

你所說的那種方法不太好。 官方也沒有那種用法。。解決方法如下：
A-->B ,B不存， C-->B ,B存
思路基于 A --> B --> C 這種頁面關(guān)系

具體思路是: （這個思路應(yīng)該驗證了猜想2）
1、用vuex 存儲需要緩存的頁面B的名稱。
<keep-alive :include="$store.state.keepAlives">

<router-view></router-view>

</keep-alive>

2、再結(jié)合 導(dǎo)航守衛(wèi)
從A-->B的時候，設(shè)置vuex 緩存， 這樣B頁面在去其他頁面時，就被緩存了。從其他頁面到B就加載緩存數(shù)據(jù)（C就是其他頁面），
從B-->A的時候，設(shè)置vuex 不緩存（刪除B頁面名字）， 這樣離開B頁面到A，B就沒有緩存下來， 你從A-->B 就不是緩存的。符合要求 （離開B的時候就設(shè)置下次進(jìn)來是否緩存。這樣避開了猜想2）

A頁面的 導(dǎo)航守衛(wèi)
beforeRouteLeave(to, from, next) {

     // 設(shè)置下一個路由的 
 if(to.name=='B'){
    this.$store.commit('setkeepAlives',['B'])
 }     
 next();

},

B頁面的 導(dǎo)航守衛(wèi)
beforeRouteLeave(to, from, next) {

     // 設(shè)置下一個路由的 
 if(to.name=='A'){
    this.$store.commit('setkeepAlives',[])
 }     
 next();

},

2018年1月14日 02:59