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.

[GitNimay]

This is expected if the thing being kept alive is the RouterView wrapper rather than the actual matched route component.

RouterView is not a normal static child component. It is an outlet that always resolves against the current active route. So when the route changes from page1 to page2, any nested RouterView that is still mounted may resolve using the new current route context, even if its parent route component is currently inactive inside KeepAlive.

The usual fix is to use the RouterView slot and put KeepAlive around the rendered route component, not around RouterView itself:

<RouterView v-slot="{ Component, route }">
  <KeepAlive>
    <component
      :is="Component"
      :key="route.name || route.fullPath"
    />
  </KeepAlive>
</RouterView>

For nested routes, apply the same idea at the level where you want caching:

<RouterView v-slot="{ Component, route }">
  <KeepAlive>
    <component
      :is="Component"
      :key="route.fullPath"
    />
  </KeepAlive>
</RouterView>

The important distinction is:

<!-- Avoid this -->
<KeepAlive>
  <RouterView />
</KeepAlive>

<!-- Prefer this -->
<RouterView v-slot="{ Component, route }">
  <KeepAlive>
    <component :is="Component" :key="route.fullPath" />
  </KeepAlive>
</RouterView>

If page1 and page2 both contain their own nested RouterView, also make sure the nested views are part of the cached route component’s own subtree and that their keys are derived from the matched child route, not from a shared global value that changes for both pages.

So I would not expect an inactive cached RouterView instance to keep resolving as if the app were still on page1. The stable thing to cache is the matched component rendered by RouterView, with an explicit key.