使用 `keep-alive`
实现 Vue 页面缓存主要有以下几种方法：
1
. **在路由配置中
设置缓存状态**：在 `router` 里为需要
缓存的
页面设置 `meta` 字段中的 `keepAlive` 为 `true`。例如订单列表和订单详情页，跳转到详情时
缓存订单列表页，配置如下：
```javascript
{
path: 'orderList',
name: 'orderList',
component: () => import('@/pages/order/orderList/index'),
meta: {
title: '订单列表',
keepAlive: true // 需要
缓存
}
},
{
path: 'orderDetails',
name: 'orderDetails',
component: () => import('@/pages/order/orderList/orderDetails'),
meta: {
title: '订单详情'
}
}
```
在 `App
.vue` 里，根据 `meta` 字段的 `keepAlive` 决定是否使用 `keep-alive` 包裹 `router-view`：
```
vue
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route
.meta
.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route
.meta
.keepAlive"></router-view>
</div>
</template>
```
[^3]
2
. **在组件守卫钩子中控制
缓存**：在组件的守卫钩子中修改 `keepAlive` 的值，以此控制
页面是否
缓存。例如在 `List
.vue` 和 `Detail
.vue` 中：
```
vue
// List
.vue
export default {
// 从 List 组件离开时，修改 keepAlive 值为 false，保证进入该
页面时
页面刷新
beforeRouteLeave(to, from, next) {
from
.meta
.keepAlive = false
next()
}
}
// Detail
.vue
export default {
// 从 Detail 返回 List 时，修改 List 的 keepAlive 为 true，确保返回 List
页面时使用
缓存不刷新
页面
beforeRouteLeave(to, from, next) {
if (to
.name === 'List') {
to
.meta
.keepAlive = true
}
next()
}
}
```
[^2]
3
. **
实现不同的
缓存需求**：
- **
缓存确定的某些
页面**：在路由配置的 `keepAlive` 字段中写入
缓存状态，或者在 `router-view` 定义的同组件中写入静态数组来
实现缓存。
- **
缓存打开的
页面，关闭时取消
缓存**：适用于基于带有标签导航的项目，这类项目会在每个
页面打开时保存
页面的导航标签并提供关闭功能。在打开和关闭时会在全局（如使用 `
VUEX` 或者 `WEB STORAGE`）存储打开
页面的明细，需要监控这个明细结合
缓存基本模型来
实现。
- **前进刷新，后退
缓存**：适用于有层级跳转的项目，比如省/市/区或者一级/二级/三级/四级机构等的项目。需要先定义好层级关系，并将关系和
缓存明细存储在全局，再结合
缓存基本模型，然后监控路由变化来
实现。可以通过 `watch` 监控 `$route` 的变化来判断前进或者后退状态，并依据状态更新
缓存明细：
```javascript
watch: {
$route(to, from) {
// 1，监控路由，判断前进或者后退状态
// 2，依据前进/后退状态，更新
缓存明细
}
}
```
设置了 `keepAlive`
缓存的组件，相关钩子执行顺序如下：第一次进入时是 `created -> activated -> deactivated`；后续进入时是 `activated -> deactivated`。可以通过这些钩子
实现个性化功能。
[^4]
本文介绍了在Vue中实现页面缓存的三种方法：利用内置的keep-alive组件，通过Vue Router配置缓存路由，以及使用localStorage或sessionStorage进行本地存储。这些策略能提升应用性能，保持用户体验。
订阅专栏 解锁全文
扫一扫
4674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
