keep-alive issues: Under keep-alive, the inactive RouterView child component gets replaced by the currently active sibling RouterView component at the same level.

[WJ0527]

"When I switch from page1 to page2, the RouterView component nested under the inactive RouteView component (keyed as page1) within keep-alive gets replaced by the sibling RouterView component that is currently active and keyed as page2. Expected behavior: The RouterView component nested under the inactive RouteView component (keyed as page1) within keep-alive should remain as the RouterView component keyed as page1."

[selcukcukur]

@WJ0527 What you’re running into is a known quirk of how <keep-alive> interacts with nested <RouterView> components in Vue Router 4. By default, Vue will reuse the same internal vnode for sibling <RouterView> instances, which means when you switch from page1 to page2, the inactive RouterView under page1 gets replaced by the active one keyed as page2.

Why it happens

• <keep-alive> caches components based on their key.
• If multiple <RouterView> instances share the same vnode identity, Vue considers them interchangeable.
• Without a unique key, Vue cannot distinguish between the inactive cached view and the newly activated one.

Solution

You need to give each <RouterView> a stable, unique key that reflects the current route. The recommended approach is to bind the key to the route’s full path or name:

<keep-alive>
  <RouterView :key="$route.fullPath" />
</keep-alive>

or, if you prefer route names:

<keep-alive>
  <RouterView :key="$route.name" />
</keep-alive>

This ensures that when you navigate from page1 to page2, Vue keeps the cached vnode for page1 intact and creates a separate one for page2.

Best practices

• Use $route.fullPath if query params or dynamic segments matter for caching.
• Use $route.name if you only care about the route identity, not its params.
• If you want fine‑grained control, you can also use the include/exclude props on <keep-alive> to specify which components should be cached.