keepAlivePlugin - 路由缓存

什么是 keepAlivePlugin？

keepAlivePlugin 是一个用于路由缓存的插件。它可以让用户在页面之间切换时保持页面的状态，避免重复加载和重新渲染，提升用户体验和系统性能。

INFO

无需给路由对应的组件设置名称，基础缓存也无需在路由配置中设置 name 属性

启用插件

import { createRouter, keepAlivePlugin } from '@pro/router'

const router = createRouter({
  // ... 其他配置
  plugins: [
    keepAlivePlugin()
  ]
})

在组件中

<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="$router.cachedComponentNames.value">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

在路由中配置

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: {
      keepAlive: true, // 启用缓存
    }
  },
  {
    path: '/user',
    name: 'User',
    component: User,
    meta: {
      keepAlive: {
        include: ['Role'] // 只有当 /user 导航到 /role 时，/user 路由才会被缓存
      }
    }
  },
  {
    path: '/role',
    name: 'Role',
    component: Role,
    meta: {
      keepAlive: {
        exclude: ['User'] // 当 /role 导航到非 /user 时，/role 路由才会被缓存
      },
    }
  },
]

插件配置选项

选项	类型	默认值	说明
defaultKeepAlive	boolean	false	选填，默认是否缓存

路由 Meta 配置选项

选项	类型	默认值	说明
keepAlive	boolean | { include: string[]; exclude: string[] }	false	选填，当为 boolean 时，表示是否缓存当前路由，当配置为 { include: string[] } 时，表示只有导航到 include 中的路由时，当前路由才会被缓存，当配置为 { exclude: string[] } 时，表示只有导航到非 exclude 中的路由时，当前路由才会被缓存，string[] 代表对应路由的 name 属性，需在对应路由中书写 name 属性，路由中的配置优先级大于插件选项配置