Only the first view component can be displayed under the keep-alive tag in vue-router

the following is the part of the VueRouter definition:

 path:"/second/goto",              
 components :{
    default:first,
    aview:goto,
    bview:goto2
}

here are the components that contain the path / second/goto :

<router-link to="/second/goto">goto</router-link>                    
<!--<keep-alive>-->
        <router-view   class="view default-view" :seller="seller"></router-view>
        <router-view  class="view a-view" name="aview"></router-view>
        <router-view  class="view b-view" name="bview"></router-view>
   <!-- </keep-alive>-->
</div>

but if you wrap keep-alive notes around router-view , you can only display first , and the keep-alive tag is used as a cache component. I don"t understand why?

Feb.28,2021

keep-alive
" Note that < keep-alive > is used when one of its immediate subcomponents is switched on. If you have v-for in it, it won't work. If there are multiple conditional child elements mentioned above, < keep-alive > requires that only one child element be rendered at the same time. "

The source code render method of

vue keep-alive is also the first sub-component to obtain render getFirstComponentChild

clipboard.png

as to why Youda is designed in this way, we can mention issue

.
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-1e8e980-46fce.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-1e8e980-46fce.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?