最近在用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后就好了~~看来就是他自说自话把我要显示的给覆盖渲染掉了。