用ElementPlus开发el-tab结合router-view调用组件时需要注意多次渲染的问题

最近在用vue3+elementPlus开发后台界面，用到右侧el-tab这个组件结合router-view实现调用，刚在逛csdn的时候发现一个大佬说如果把router-view放在el-tab-pane下会导致多次渲染，我想还有这事？赶紧测试一下。。。果然，大佬还是大佬。

原代码及渲染次数

<el-tabs v-model="activeTab" type="card" closable @tab-remove="removeTab">
  <el-tab-pane v-for="tab in tabs" :key="tab._id" :label="tab.title" :name="tab._id">
    <router-view></router-view>
  </el-tab-pane>
</el-tabs>

点击三个菜单

注意一下左侧的次数，出乎意料啊。

修改代码及渲染次数

把router-view扔出去

<el-tabs v-model="activeTab" type="card" closable @tab-remove="removeTab">
  <el-tab-pane v-for="tab in tabs" :key="tab._id" :label="tab.title" :name="tab._id">
  </el-tab-pane>
</el-tabs>
<router-view></router-view>

果然干净了！

同时还解决了我另一个问题：
之前默认打开页面时要显示首页，代码写好了却一直没实现，我想是个小问题就没去管，结果刚才把router-view拿出el-tab-pane后就好了~~看来就是他自说自话把我要显示的给覆盖渲染掉了。

【vue】elementUi 里面的tabs标签页使用