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?

Vue-router

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

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

Previous: How does ftp achieve accurate speed limit?

Next: Should id be placed in the path of API or in request?

Vue introduces multiple components in vue-router by nesting named views, and does not refresh the same reference in other pages.
in router.js, because the breadcrumb component is used in multiple pages, the breadcrumb component is referenced by nested named views: { path: Manage , name: , component: function(res) { require([ .. components common layo...

Vue-router vue.js

Feb.26,2021
The processing of dynamic routing in vue single page mode
there is such a background system, which is divided into many systems and modules, which involves a lot of operation permissions, and each lander is assigned different permissions, so the operable menus and visible pages are also different. the previo...

Vue.js vue-router vuex element-ui javascript

Feb.27,2021
How does vue router output data values?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document< title> < head> <body> <div id="app"> <h1>Hello App!< h1> <...

Vue.js vue-router

Feb.27,2021
After vue-router lazily loads the configuration, the page becomes a blank page for solution and guidance.
after vue-router lazy loading configuration, the page becomes blank this problem does not occur when lazy loading is not configured, when configuring lazy loading *const product = resolve => { require.ensure([ . pages product.vue ], () =>...

Webpack vue-router

Feb.27,2021
Vue routing Jump problem
if the current page is under , use < router-link: to= "{path: ,query: {category_id:item.id}} " > jump < router-link > to jump. In fact, the page has no jump effect, can it be processed as similar to the jump effect between different routes? ...

Vue-router vue.js

Feb.27,2021
After vuex uses module, the store.state. cannot be obtained from the beforeEnter in the routing file.
try to get store data in the route file, but the undefined vuexmodule modulestore is displayed. ...

Vue.js vuex vue-router

Feb.27,2021
Could you tell me how to use vue dynamic routing?
I looked at the official document and I didn t understand it. How should I write it in this.$router.push ( xx1 xx2 )? ...

Vue.js vue-router

Feb.28,2021
Vue-cli 's single-page application. After logging in, any page will be returned to the login page as soon as it is refreshed.
vue-cli s single-page application. After logging in, any page will be returned to the login page as soon as it is refreshed. how to refresh will not exit ...

Vue-router vue-cli

Feb.28,2021
The page opened by Wechat in the vue project is not the current page through the system browser.
Wechat pay in Alipay, complete the payment by opening the system browser. The project is built on vue. Instead of the current page being opened via safari, you are going to the root directory of the route. Not even history with mode. Dear gods, how to so...

Safari vue.js vue-router WeChat-Pay

Feb.28,2021
What should I do if the horizontal menu bar in the element-UI component loses focus and cannot be retracted automatically after the horizontal menu bar is expanded?
for example, after expanding like the following, click on the contents but the menu bar will not automatically withdraw what should be solved, thank you! the content below me is wrapped in router-view the code for the horizontal menu bar is as fo...

Vue-router element-ui

Feb.28,2021
The vue component is not cached, enter the page to initialize the picture long press event, enter the same component for the second time and cause the long press event to be triggered multiple times?
1. I initialize the long press event 2Router of the picture in mounted. ...

Vue-router vue.js

Feb.28,2021
How to use vue-router, transition and keep-alive together in vue?
my routing switch has the effect of sliding left and right, so that s how I use it. < router-view> < transition> are two transition, one responsible for the animation of the keep-alive component and the other for the animation of the ...

Transition vue-router vue.js

Feb.28,2021
Vue child component, how to query the details according to the id, passed by the parent component and display it in the child component?
if I go to the background to query the details according to the id in the created method of the component, it can be displayed normally without reporting an error, but when the id value of the parent component is changed, it will not be again....

Vuex javascript vue-router vue.js

Feb.28,2021
How does the navigation guard of vue-router judge the value of cookies or vuex
first of all, before the user logs in, I want to determine whether the user is logged in according to the value stored in cookies or vuex. If cookies logs in, it will store the userId and userName fields. then, my vuex goes like this: import Vuex fro...

Cookies vuex vue-router

Feb.28,2021
Is there a way to pass the push parameters of Vue's router without showing the parameters in the url?
is there a way to pass parameters in router of Vue without displaying the parameters in url? http: localhost:8081 id=1&bandwidth=10&user&name=%E6%9C%8D%E5%8A%A1%E5%99%A81&desc=%E6%9C%8D%E5%8A%A1%E5%99%A81&cpu=1%E6%A0%B8&ram=2G...

Vue-router vue.js

Feb.28,2021
Asynchronously request data, according to the request data require component
I am working on a page customization function. The template is stored in the background database, so you need to pull the template id, from the background and then follow the template id require corresponding to the components in the directory. For exam...

Require async-request vue.js vue-router

Mar.01,2021
How does vue.js vue-router control sub-reason elements
who is proficient in vue, teach me how to control the elements of child routing. case is: two links title 1, title 2, click to display content 1, content 2; then, content 1 has two links: title 11, title 22, click title 11 to add a border to him, displa...

Vue-router

Mar.01,2021
When vue router switches pages, Catton: the current page pauses for a while before switching to the new page.
when vue router switches pages, there will be stutters: pauses on the current page (and scrolls to the top) before switching to the new page the address bar changes immediately. Back to the top is the configuration item of the route, indicating that ...

Vuex vue-router vue.js

Mar.01,2021
How to set the navigation menu requested from the background by vue-router?
the front end is built with vue-cli scaffolding, and the menu on the site is requested from the background and is an array object. I would like to ask you, how can the requested data be dynamically combined with vue-router? ...

Vue-router vue.js

Mar.01,2021
Vue-router switch parameter transfer unchanged
the this.$route.params.id obtained during vue route switching remains the same. you need to click the category and then click the computer before the phone can be changed, as shown in figure . Click the category-- Mobile idid1 --id the code is as ...

Vue.js vue-router

Mar.01,2021