vue组件中添加element-ui（vueelement组件el-tab-pane导致router-view加载多次）
vue组件中添加element-ui（vueelement组件el-tab-pane导致router-view加载多次）调整后调整前调整后<router-view></router-view>在<el-tab-pane></el-tab-pane>外， 即为<el-tab-pane></el-tab-pane><router-view></router-view>状态。
本来el-tab-pane这个组件可以方便菜单快速切换，后来无意发现router-view在其中时会加载多次，也就是mounted周期钩子多次加载；例如有五个tab就会加载五次，如下图。经过各种测试，排除路由问题，做出一下调整。
主界面
调整前<router-view></router-view>在<el-tab-pane></el-tab-pane>内， 即为
<el-tab-pane><router-view></router-view></el-tab-pane>状态。
调整前
调整后<router-view></router-view>在<el-tab-pane></el-tab-pane>外， 即为
<el-tab-pane></el-tab-pane><router-view></router-view>状态。
调整后
<template>
<div>
<el-tabs
v-model="mainTabsActive"
type="card"
closable
@tab-remove="removeTab"
@tab-click="handleClick"
>
<el-tab-pane
v-for="(item) in mainTabs"
:key="item.name"
:label="item.title"
:name="item.name"
>
</el-tab-pane>
</el-tabs>
<keep-alive>
<div class="main-box">
<el-scrollbar
:native="false"
wrapStyle=""
wrapClass="scrollbar-wrapper"
viewClass=""
viewStyle=""
:noresize="false"
tag="section"
>
<div class="elui-inside-body">
<div class="elui-card">
<div class="elui-card-body">
<router-view></router-view>
</div>
</div>
</div>
</el-scrollbar>
</div>
</keep-alive>
</div>
</template>
