tab切換vue中created方法執行兩次

問題描述

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>