在 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>