前端 - vue3中keep-alive 缓存页面如何实现？

Question

vue3中使用keep-alive中include属性来缓存router-view
在第一层子级下缓存是生效得 但是在第二级缓存就不生效了

<router-view v-slot="{ Component, route }">   <keep-alive :include="keepAliveName">       <component :is="Component" :key="route.fullPath" />   </keep-alive></router-view>const keepAliveName = ["Assembil","table", "from","details1","details2"]// keepAliveName数组中的元素是组件页面上的name值、不是路由上的name值

最终想实现得是在全局layout实现个页面缓存（不仅只有两级children还会有更多）、通过组件得name值配置或者路由信息配置

请求大佬指教������

Answer 1

你的children里面的路由都是要用 router-view 包起来展示的呀
比如你的 assembly/table.vue 组件中也会有 router-view
你把这个 router-view 用 keep-alive 包起来就可以了。

Answer 2

在你的代码中，keep-alive 的 include 属性用来指定需要被缓存的组件。然而，你遇到的问题似乎是在第二级子路由中，缓存不生效。这可能是因为 keep-alive 不知道如何处理嵌套的路由。

Vue 3 的 keep-alive 提供的 include 属性只能直接指定具体的组件名，无法直接指定一种在路由层级之上的抽象名字。也就是说，include 属性无法直接处理嵌套路由。

为了解决这个问题，你可能需要改变你的路由配置，尽量将所有需要缓存的页面都放在第一级子路由下，而不是在更深层次的嵌套路由中。

如果你有大量的嵌套路由并且都希望被缓存，那么你可能需要编写一个自定义的插件或者使用第三方库来帮助你处理这个问题。这个插件或库可以尝试在 beforeRouteEnter 或 beforeRouteUpdate 生命周期钩子中，检查当前的路由是否应该被缓存，然后相应地处理状态。

另外，你提到的通过组件的 name 值来配置缓存，这是一个可行的方案。你可以在你的组件中添加一个 name 属性，并在路由配置中使用这个 name 属性。例如：

<template>  <component :is="Component" :key="route.fullPath" /></template><script>export default {  name: 'MyComponent',  // ...}</script>

然后在路由配置中使用这个 name：

const routes = [  {    path: '/',    component: Layout,    children: [      {        path: 'my-component',        component: MyComponent,        name: 'MyComponent', // 这里使用组件的name作为别名      },      // 其他路由...    ],  },  // 其他路由...]

然后在你的 keep-alive 中使用这个 name：

<keep-alive :include="keepAliveName">  <router-view v-slot="{ Component, route }">    <component :is="Component" :key="route.fullPath" />  </router-view></keep-alive>

const keepAliveName = ["MyComponent"] // 这里使用组件的name作为别名