CODEWITHSUNDEEP
vue.jsvue-router
Eric Guan
Eric Guan

Reputation: 15982

Vue router keep alive nested components after changing pages

Example of my issue here: https://jsfiddle.net/guanzo/myn5o94e/1/

  1. App defaults to /bar.
  2. Click "Go to bar child" which navigates to /bar/barchild and creates the BarChild component.
  3. Click "Go to Foo" which navigates to /foo
  4. Click "Go to bar". Bar child has disappeared.

Both Foo and Bar are "pages". How do i keep BarChild alive inside Bar when i switch between pages?

I know why BarChild disappears, it's because "Go to bar" links to /bar. But i don't know how to implement my desired behavior.

Upvotes: 1

Views: 1939

Answers (1)

Leo
Leo

Reputation: 13858

Looks like you want the app to remember last visited child route of /bar. This is not what keep-alive was supposed to do.

I suggest you to introduce a centralized store to save the data you want to remember and retrieve later. It could be as easy as another new Vue instance, or vuex for more complicated product. You could read this page from official docs for more details.

Upvotes: 3

Related Questions