問題描述

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>

問題解決

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

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

備註

<router-view>

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

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