有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

el-tab-pane(组件el-tab-pane导致router-view加载多次)

vue 炮渣日记 3周前 (11-17) 27次浏览 已收录 0个评论 扫描二维码

本来el-tab-pane这个组件可以方便菜单快速切换,后来无意发现router-view在其中时会加载多次,也就是mounted周期钩子多次加载;例如有五个tab就会加载五次,如下图。经过各种测试,排除路由问题,做出一下调整。

el-tab-pane(组件el-tab-pane导致router-view加载多次)

主界面

调整前<router-view></router-view>在<el-tab-pane></el-tab-pane>内, 即为

<el-tab-pane><router-view></router-view></el-tab-pane>状态。

el-tab-pane(组件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(组件el-tab-pane导致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>
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址