The problem of elementUI tab page switching cycle

when the elementUI tab page is switched, the corresponding tab-pane component I use the dynamic component, and then I find that it only triggers the mounted event, and there is no event trigger when I leave.
before-leave, with tab tag finds that oldActiveName can"t get it, so it will error undefine.

.

clipboard.png

and sometimes when the page comes in, before-leave triggers the entry of the first tag multiple times when the first page does an action. The great god took a look at what went wrong. The code is as follows,

<div class="company-page">
        <el-tabs v-model="activeName" type="card" :before-leave="clearTime(activeName,oldActiveName)" @tab-click="handleClick">
            <el-tab-pane :key="item.tapKey" v-has="item.tapKey" v-for="(item, index) in actList" :label="item.tapName" :name="item.tapKey">
                
            </el-tab-pane>
        </el-tabs>
        <main  class="pageBox main">
            <component :ref="activeComponent"  :is="activeComponent"></component>
        </main>
    </div>

:before-leave="clearTime"

do you have a good solution?


you can refer to this example. Inside el-tabs is a nested route: URL


encountered a similar problem today. El-tab 's: the before-leave hook never works. Then it turns out that the element-ui version is too low. The element for the company's project uses 2.1.0.
: before-leave is a new attribute in version 2.4.0.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e953f1-153b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e953f1-153b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?