Subscribe on changes!

Keep-alive doesn't work with nested router-view

avatar
May 19th 2023

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 component BlankView.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 and bash have common parent components TestView.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