Keep-alive doesn't work with nested router-view
Vue version
3.2.47
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-pzruhm?file=src%2Fviews%2FTestView.vue
Steps to reproduce
- use
keep-alive
cache the componentBlankView.vue
<router-view #="{ Component }" v-if="isRouterAlive">
<keep-alive>
<component :is="Component" style="margin: 0 16px" />
</keep-alive>
</router-view>
- And the Level 3 routes:
basl
andbash
have common parent componentsTestView.vue
<template>
<router-view></router-view>
</template>
<script>
export default {
name: 'TestMyLayout'
}
</script>
- router:
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/AboutView.vue')
},
{
path: '/test',
component: BlankView,
children: [
{
path: 'test-1',
component: TestView,
children: [
{
path: 'example',
component: TestView,
children: [
{
path: 'basl',
name: 'Basl',
component: () => import('../views/example/basl/index.vue'),
meta: {
title: 'basl title'
}
},
{
path: 'bash',
name: 'Bash',
component: () => import('../views/example/bash/index.vue'),
meta: {
title: 'bash title'
}
}
]
}
]
}
]
}
]
What is expected?
Cache is working for The Level 3 routes
What is actually happening?
Cache is not working for The Level 3 routes
System Info
No response
Any additional comments?
No response