Vue3 keep-alive 和路由 meta 的动态地控制封装

在 Vue 3 中使用 router-view 和 <keep-alive> 时，如果想要从缓存中排除特定的页面，例如你想排除 '/home' 和 '/note' 路径的页面，你需要正确设置 <keep-alive> 的 exclude 属性。exclude 属性接受一个字符串或正则表达式来指定哪些组件不应被缓存。

每个路由对象的 meta 属性中添加一个 keepAlive 属性（默认为 true，对于不想保持活跃状态的页面设置为 false）。然后，根据这个属性来动态决定是否使用 <keep-alive>。

修改你的路由配置如下：

{
    path: '/home',
    name: 'home',
    component: () => import('../views/home/index.vue'),
    meta: {
        title: 'y',
        showTabBar: true,
        keepAlive: false // 不缓存此页面
    }
},
{
    path: '/about',
    name: 'about',
    component: () => import('../views/about/index.vue'),
    meta: {
        title: 'x',
        showTabBar: true,
        keepAlive: false // 不缓存此页面
    }
},

在模板中动态判断是否将组件包裹在 <keep-alive> 标签中：

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

添加一个计算属性或方法来根据路由的 meta.keepAlive 属性决定是否缓存该组件：

const shouldKeepAlive = (route) => {
  // 如果路由的meta属性中keepAlive为false，则返回一个不匹配任何组件名称的值
  return route.meta.keepAlive === false ? 'never-matched' : '';
};

通过动态地控制 <keep-alive> 的 include 或 exclude 属性值来决定哪些组件被缓存