There are many independent components in the el-tabs of vue element. There are too many requests for the first time, so I want to optimize them.

<el-tabs v-model="tabsActiveName" type="border-card" @tab-click="handleClick">
                <el-tab-pane label="" name="first">
                    <userCom/>
                </el-tab-pane>
                <el-tab-pane label="" name="second">
                    <roleCom/>
                </el-tab-pane>
                <el-tab-pane label="" name="third">
                    <limitCom/>
                </el-tab-pane>
                <el-tab-pane label="" name="forth">
                    <menuCom/>
                </el-tab-pane>
                <el-tab-pane label="" name="fifth">
                    <businessCom/>
                </el-tab-pane>
                <el-tab-pane label="" name="sixth">
                    <channelCom/>
                </el-tab-pane>
</el-tabs>

for the first time in this big component, there will be too many requests for six sub-components at the same time. When you want to switch to which component, which component will request again, and how to do it? my idea is to add vMutual false in the 2nd to 6th. When switching to which one, the effect will be OK. Is there any other way of thinking

?
Mar.23,2021

bind subcomponents to routes, and then send requests by lazily loading routes


listening for changes in activeName!

Menu