記 el-tabs el-tab-pane 中嵌套 router-view出現的問題

在 el-tabs el-tab-pane 中嵌套router-view 會出現內部的子路由 所有的生命周期鈎子 調用兩到三次；不得不說，這玩意是真的坑。這邊將router-view從el-tab-pane中拿出來即可 ；

 

 <el-tabs v-model="$store.state.contentTabsActiveName"
        @tab-click="tabSelectedHandle"
        @tab-remove="tabRemoveHandle">
        <el-tab-pane
          v-for="item in $store.state.contentTabs"
          :key="item.name"
          :name="item.name"
          :label="item.title"
          :closable="item.name !== 'Dashboard'">
          <template v-if="item.name === 'Dashboard'" #label>
            <img width="20" height='20' src="../../icons/svg/home.svg" alt="">
          </template>
         
        </el-tab-pane>
      </el-tabs>
    <div class="router">
        <router-view v-slot="{ Component }">
            <component :is="Component" />
      </router-view>
    </div>

轉自：https://www.it1352.com/696885.html