vue+element 组件el-tab-pane导致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>