vue路由在keep-alive下的刷新問題


問題描述:

  在keep-alive中的在跳轉到指定的路由時刷新對應的路由,其余不刷新。

<transition name="fade" mode="out-in">
   <keep-alive>
       <router-view></router-view>
   </keep-alive>
</transition>

有幾種解決方式:

  1.在keep-alive中直接添加 include,cachedViews(Array類型:包含vue文件的組件name都將被緩存起來);反之exclude則是不包含;

  注意:所有.vue組件文件都必須附上name屬性!!!建議用vuex管理cachedViews

<keep-alive :include="cachedViews">
      <router-view></router-view>
</keep-alive>

  2.監測$router的變化;

 watch: {
     // 如果路由有變化,會再次執行該方法
    "$route": "fetchDate"
 }

  但是會在頁面離開時再次執行fetchDate,並不是我們需要的,所以可以在to和from上添加執行邏輯,但也是十分的麻煩

//$router是只讀狀態,所以賦值操作會失效
watch: {
    $route (to, from) {
        if(list.indexOf(from.path) > -1){ //自行添加邏輯,list為你不想有緩存的路徑
        this.getData()
        }   
  }
}

  3.在添加keep-alive后會增加兩個生命周期mounted>activated、離開時執行deactivated,路由的進入和切換回相應的觸發activated和deactivated,這樣就可以在每次入路由執行更細致的操作了

//如果是服務端渲染就算了 
activated() {
    //只刷新數據,不改變整體的緩存
    this.fetchDate();
 }

  4.還有更簡單粗暴的

//我就笑笑不說話
<div> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div>

  5.還有種情況,在不同路由應用了相同的vue組件

{path:'aaa',component:Mompage,name:'mom'},
{path:'bbb',component:Mompage,name:'momPlus'}

  默認情況下當這兩個頁面切換時並不會觸發vue的created或者mounted鈎子,需要手動的watch:$router(又回到上面的步驟),或者在router-view上加上唯一值。

//隨便抄一段代碼過來
<router-view :key="key"></router-view>
computed: {
    key() {
        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
    }
 }

  有錯誤的,請指出


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM