問題描述

element-admin中使用tab切換到不同的路由，發現每次切換tab路由都會執行兩次生命周期

<tabs:tabs="tabs"v-model="activeName"@on-switch="handleSwitch" ><components :is="activeName"></components> </tabs>

問題分析

Vue官網上提供了一個動態組件 <component :is="currentTabComponent"> ,可以使用is動態切換組件，切換組件后組件會立即開始一個生命周期，然后路由跟著變化了，路由變化后又引發了頁面重新渲染，所以會出現created中的方法執行兩次的問題。解決方法就是將動態組件放到一個<router-view>組件中，這樣切換tab后就根據匹配的路由渲染頁面了。

問題解決

使用<router-view>將動態組件包起來，這樣每次切換都重新渲染一次。

<tabs:tabs="tabs"v-model="activeName"@on-switch="handleSwitch" ><router-view><components :is="activeName"></components></router-view> </tabs>

備注

<router-view> 組件是一個 functional 組件，渲染路徑匹配到的視圖組件。<router-view> 渲染的組件還可以內嵌自己的 <router-view>，根據嵌套路徑，渲染嵌套組件。

因為它也是個組件，所以可以配合 <transition> 和 <keep-alive> 使用。如果兩個結合一起用，要確保在內層使用 <keep-alive>

<transition><keep-alive><router-view></router-view></keep-alive> </transition>

總結

以上是生活随笔為你收集整理的vue切换tab更新路由created执行两次的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。