Vue 2 not working with and key

Question

I\'m using vue-router with a series of components like tabs. Each is a tab and the space below is the . Two

Answer 1

Have a look from what I posted here for vue 2+:

vue.js keep-alive and router-view

If you want to swap things around based on the route url you can add children to your routes.js file and bind off parameters that way. For example if you wanted to have your component kept alive but need the data to change from part of the path you can do something like this:

{ 
  path: 'products', component: Products, ...,
  children: [
              { path: 'Overview/:name', props: true, component: Overview },
              { path: 'Overview/:name/:id', props: true, component: Details }
            ]
}

You can route first to /Products, then on say user click of an image or list of whatever you want route to /Products/Overview/Memes, after the user then clicks a specific meme you could route to /Products/Overview/Memes/MrPotatoHead and have the component load data on Mr Potato Head or something to that effect.

Its important to note that the Products component will be kept alive but the sub components will not. Even if you wrap the sub components template in keep-alive it will be destroyed:

destroy nested keep-alive components