vue3中多层级路由缓存失效问题

最新推荐文章于 2025-09-20 10:21:10 发布

原创

最新推荐文章于 2025-09-20 10:21:10 发布 · 1.1k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

问题现象：

在项目中路由嵌套了超过两层后，使用keep-alive对路由进行页面的缓存，发现并不能生效。
使用的路由结构：

// 一级路由
      path: 'menu1',
      component: () => import('@/views/demos/nested/menu1/index'), // Parent router-view
      name: 'Menu1',
      meta: {
   
    title: 'Menu 1' },
      redirect: '/nested/menu1/menu1-1',
// 二级路由
      children: [
        {
   
   
          path: 'menu1-2',
          component: () => import('@/views/demos/nested/menu1/menu1-2'),
          name: 'Menu1-2',
          redirect: '/nested/menu1/menu1-