- A+
我们在开发一个功能是，经常会遇到从一个列表页面，点击列表项跳转到详情页面的需求，理想的情况下，从详情页面返回到列表页，应该回到跳转前的状态，可以继续浏览其他内容；但是在没做任何处理的情况下，返回列表页后，列表页会被刷新，回到初始的状态，这就与我们的预设不符；为了实现这样的需求，我们需要使用keep-alive组件来缓存列表页面的状态，让其不被刷新，这样就可以愉快的继续浏览啦。
下面就是我们使用keep-alive组件的一些步骤：（ps：项目使用vue3、vue-router、pinia、typescript）
1、声明路由的Meta扩展数据类型，用来在路由中配置哪些页面需要被缓存
router.d.ts
import "vue-router"; declare module "vue-router" { interface RouteMeta extends MyRoute.RouteMeta { title: string; keepAlive?: boolean; // 该路由页面是否需要缓存 keepAlivePages?: Array<string>; // 配置需要缓存的跳回来源（从某页面回到该页面，该页面缓存，其他页面回到该页面，该页面不缓存） canBack?: boolean; // 是否可以返回 } }
2、配置路由信息，以文章列表和详情页面为例
分模块配置路由文件library.ts
import { RouteComponent, RouteRecordRaw } from "vue-router"; const routes: Array<RouteRecordRaw> = [ { path: "library/list", name: "libraryList", meta: { title: "文章列表", keepAlive: true, keepAlivePages: ["libraryDetail"] }, component: (): RouteComponent => { return import(/* webpackChunkName: "pages_knowledge_library" */ "@/views/pages/knowledge/library/index.vue"); } }, { path: "library/detail", name: "libraryDetail", meta: { title: "文章详情", canBack: true }, component: (): RouteComponent => { return import(/* webpackChunkName: "pages_knowledge_library_detail" */ "@/views/pages/knowledge/library/detail.vue"); } } ]; export default routes;
3、声明页面组件的名称，与配置的名称一致：keep-alive 组件会根据组件的 name 选项进行匹配，所以组件如果想要条件性地被 keep-alive 缓存，就必须显式声明一个 name 选项。
在 3.2.34 或以上的版本中，使用 <script setup> 的单文件组件会自动根据文件名生成对应的 name 选项，即使是在配合 <KeepAlive> 使用时也无需再手动声明。
但在项目中我们是分模版开发，业务组件文件重名的几率还是挺大的，所以我们还是需要显式声明组件的name属性。
library/index.vue
<template> <!-- 页面模版 --> </template> <script lang="ts"> import { defineComponent } from "vue"; export default defineComponent({ name: "libraryList" }); </script> <script lang="ts" setup> // 页面绑定数据 <script>library/detail.vue
<template> <!-- 页面模版 --> </template> <script lang="ts"> import { defineComponent } from "vue"; export default defineComponent({ name: "libraryDetail" }); </script> <script lang="ts" setup> // 页面绑定数据 <script>
3、定义一个Store用来缓存需要被缓存的页面集合
keepAliveStore.ts
import { defineStore } from "pinia"; export interface KeepAliveState { keepAliveComponents: Array<any>; } export const keepAliveStore = defineStore("keepAlive", { state: (): KeepAliveState => { return { keepAliveComponents: [] }; }, getters: { getKeepAliveComponents(state) { return state.keepAliveComponents; } }, actions: { // 加入到缓存队列 setKeepAlive(component: any) { if (!this.keepAliveComponents.includes(component)) { this.keepAliveComponents.push(component); } }, // 从缓存队列移除 removeKeepAlive(component: any) { const index = this.keepAliveComponents.indexOf(component); if (index !== -1) { this.keepAliveComponents.splice(index, 1); } } } });4、路由守卫处理：在路由进入之前读取Meta扩展数据，如果配置了缓存，就加入到缓存队列中；在路由离开之前判断目标路由的Meta扩展数据，如果该页面与配置的来源页面不匹配，则将目标路由从缓存队列中移除
router/index.ts
const router = createRouter({ history: createWebHashHistory(import.meta.env.BASE_URL), routes }); // --- beforeRouter --- // router.beforeEach((to, _from, next) => { const { KeepAliveStore } = usePiniaStore(); const meta = to.meta || {}; // 加入缓存队列 if (meta.keepAlive) { KeepAliveStore.setKeepAlive(to.name); } // 做一些其他的事情 }); // ---afterRouter --- // router.afterEach((to, from) => { const { KeepAliveStore } = usePiniaStore(); // 如果配置了目标缓存，即：目标页面不在目标缓存中，移除当前页面缓存 if (from.meta.keepAlivePages) { if (from.meta.keepAlivePages.indexOf(to.name as string) == -1) { KeepAliveStore.removeKeepAlive(from.name); } } // 做一些其他的事情 });
5、keep-alive组件的使用：取出缓存队列中的集合，配置给include属性，keep-alive组件便能把配置的路由页面给缓存起来了；同时也可以设置max最大缓存数，避免缓存太多导致性能下降
RouterView.vue
<template> <router-view v-slot="{ Component }"> <transition name="fade" mode="out-in" appear> <keep-alive :include="keepAliveComponents" :max="10"> <component :is="Component" /> </keep-alive> </transition> </router-view> </template> <script lang="ts" setup> import { usePiniaStore } from "@/store"; const { KeepAliveStore } = usePiniaStore(); const keepAliveComponents = KeepAliveStore.getKeepAliveComponents; </script>
