Render inactive components in DOM. Carousel of router views

I’m creating a application in Vue 2 using vue-router package. The UX requirement of the app is to create multiple panels of each route. Like the browser tabs, so the user can multi task within each view.

Using keep-alive have achieved half the requirement. Now able to maintain the state of each route(component). In the vue dev tool can see the state of the component is inactive.

Need a way where I can render these inactive components in DOM. So the user can navigate from one component to another.

Below is a function listing page. Clicking on each function opens a detail page.
The links on the bottom in blue bg is a log of all the routes the user has visited.

My requirement is to render all the log links (components) like a carousel. So in this case the function detail page will open next to listing page. And so on.

Any thoughts on how I can achieve this? Or anything similar…

1 Like

bump topic


I find solution.
Now I polishing that. When finish i will make npm package.
If anyone have questions… ask :wink: