Vue3 中 keep-alive 为什么不生效？

Question

vue3中keep-alive并不生效；设置了name；keep-alive下一层也是对应页面

这是在vue-tools中，看到keep-alive的include中包含了AccountManage，并且下一层就是AccountManage组件；

<div class="app-main">
    <!-- <keep-alive :include="usePermissionStore().cachedViews">
      <router-view :key="key"/>
    </keep-alive> -->
    <router-view v-slot="{ Component }" >
      <keep-alive :include="keepAlivePages">
        <component :is="Component" v-if="$route.meta.keepAlive" :key="route.fullPath" />
      </keep-alive>
      <component :is="Component" v-if="!$route.meta.keepAlive" :key="route.fullPath" />
    </router-view>
  </div>

这是嵌套路由

const sysManagerRouter = {
  path: '/system',
  id: 2,
  needAuth: true,
  component: () => import('@/views/layout/index.vue'),
  redirect: '/system/accountManage',
  name: 'system',
  meta: {
    title: '系统管理',
    icon: 'sysManagement'
  },
  children: [
    {
      path: 'accountManage',
      name: 'AccountManage',
      component: () => import('@/views/system/accountManage/index.vue'),
      id: 3,
      needAuth: true,
      meta: { title: '用户管理', keepAlive: true }
    },
    {
      path: 'roleManage',
      name: 'RoleManage',
      component: () => import('@/views/system/roleManage/index.vue'),
      id: 4,
      meta: { title: '角色管理', noCache: true, keepAlive: true }
    },
    {
      path: 'menuManage',
      name: 'MenuManage',
      component: () => import('@/views/system/menuManage/index.vue'),
      id: 5,
      needAuth: true,
      meta: { title: '菜单管理', noCache: true, keepAlive: true }
    },
    {
      path: 'departmentManage',
      name: 'DepartmentManage',
      component: () => import('@/views/system/departmentManage/index.vue'),
      id: 6,
      needAuth: true,
      meta: { title: '部门管理', noCache: true, keepAlive: true }
    },
  ]
}

组件页面中也设置了name

Answer 1

你发的第一张图中可以看到include数组有问题，里面的类型应该是字符串或者正则表达式，你这里似乎是组件对象。

另外的问题是，你这里控制页面keepalive的逻辑重复了，只保留include和v-if两者中一个就足够了

<router-view v-slot="{ Component }" >
      <keep-alive>
        <component :is="Component" v-if="$route.meta.keepAlive" :key="route.fullPath" />
      </keep-alive>
      <component :is="Component" v-if="!$route.meta.keepAlive" :key="route.fullPath" />
</router-view> 

<router-view v-slot="{ Component }" >
      <keep-alive :include="keepAlivePages">
        <component :is="Component"  />
      </keep-alive>
    </router-view>

Answer 2

:key="route.fullPath"
应该改为
:key="$route.fullPath"
才会生效吧