Vue中使用keep-alive实现页面缓存的两种方案
本文介绍在Vue单页面应用中，如何利用keep-alive组件解决列表页状态丢失问题。详细解析了通过include属性指定缓存组件，以及结合meta配置动态控制缓存的两种实现方式，并提供了完整的代码示例和生命周期处理逻辑。
Vue前端页面缓存
1.使用情景
在Vue单页面应用开发中，利用Vue-Router进行导航时，路由切换会导致页面重新加载及生命周期函数重复执行。然而，部分业务场景下这种机制并不适用。
例如：
- 分页数据列表场景中，若从第三页跳转至详情页后返回，未做特殊处理会导致列表重置为第一页。用户需再次切换至第三页才能查看后续数据，造成操作繁琐。
- 列表页面条件筛选场景中，查询特定数据后进入详情页，返回时列表会清空筛选条件并显示全部数据，导致用户需重新执行查询操作。
上述场景严重损害用户体验，因此需要对列表页面实施路由缓存。在Vue-Router架构中，可通过keep-alive组件实现页面缓存功能。
2.keep-alive基本认识
- Vue内置组件keep-alive用于包裹动态组件，使其内部组件状态得以保留。
- 被<keep-alive>包裹的组件，在后续再次进入时，将跳过首次进入时的部分生命周期函数。
- 该组件会额外提供activated和deactivated两个生命周期钩子。
- 通过include和exclude属性，可精确控制缓存范围：include指定需缓存的组件，exclude指定排除缓存的组件。
3.keep-alive实现路由页面缓存
基于keep-alive实现路由缓存主要有以下两种方案：
（一）、使用include控制需要缓存的页面
// home.vue
<template>
<div>
...
<keep-alive :include='cashViews'>
<router-view></router-view>
</keep-alive>
</div>
</template>
<script>
export default{
data() {
return {
// 要缓存的组件
cashViews: ['list']
}
}
}
</script> // list.vue
<script>
export default{
// 在组件内路由守卫钩子函数中处理逻辑
beforeRouteEnter (to, from, next) {
if (from.name === 'Index') { // 处理页面缓存后，返回首页再次进入缓存页时数据为更新
// 该生命周期无法获取到this，因此把vm实例当作参数传递
next(vm => {
vm.pages.pageNum = 1
// 因为我这里查询表单是动态的，所以首页进入时需要调用一次，在改方法中请求返回后调用了获取列表数据getTableDatas方法
vm.getQueryList()
})
} else if (!from.name) { // 处理刷新页面时，获取动态表单方法未执行，导致表单无法加载
next(vm => {
vm.getQueryList()
})
} else {
// 详情返回时只更新列表数据，因为如果在详情页面做了操作，列表数据状态会改变，其他使用缓存
next(vm => {
vm.getTableDatas()
})
}
}
}
</script>此方案适用于查询表单静态固定的场景。在activated钩子中调用获取列表数据的方法，可实现每次进入缓存页面时仅更新列表数据，而不影响其他缓存状态。
潜在问题：列表缓存数据在返回首页后再次进入时依然存在。可通过路由守卫beforeRouterLeave钩子进行逻辑处理以解决此问题。
activated() {
this.getTableDatas()
},
beforeRouterLeave(to, from, next) {
if (from.name === 'Index') {
// 如果从首页进入时调用重置方法
this.reset()
}
}实施要点：
- 需缓存的路由组件必须配置name属性，且该值需与cashViews数组中的元素严格对应；
- 若需缓存的组件数量较多，建议借助vuex管理cashViews列表以提升可维护性。
（二)、根据v-if控制显示的router-view
在路由表routes配置中增加meta属性，并定义keepAlive布尔值，需缓存页面将其设为true。
{ path: '/list',
name: 'List',
component: List,
meta: {
keepAlive: true
}
}依据当前访问路由的keepAlive值，动态决定组件是否被缓存。
// home.vue
<template>
...
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</template>在组件的守卫钩子中修改keepAlive的值，以精确控制页面的缓存行为。
// 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()
}
}vue页面缓存问题
1.路由设置
routes：[
{
path: 'index',
component: notice,
meta: {
keepAlive: true // 是否缓存标志
}
}
]核心在于配置元信息（keepAlive），标识页面是否需要缓存。
2.页面路由嵌套设置
<keep-alive>
// 将需要缓存得页面写在keep-alive里面
<view-router v-if="$route.meta.keepAlive"></view-router>
</keep-alive>
// 不需要缓存得页面写在外面
<view-router v-if="!$route.meta.keepAlive"></view-router>路由跳转时，需缓存的页面应嵌套在keep-alive标签内，无需缓存的页面则直接渲染。
注意：启用缓存机制会使页面增加activated和deactivated两个生命周期钩子。
3.从指定页面返回使用缓存数据
其他页面进入时则重新加载数据。
在需要缓存的页面中加入如下代码逻辑：
// 在进入页面时先判断是否是从详情页面返回
beforeRouterEnter (to, from, next) {
if(to.path === '/detail') {
this.$route.meta.isBack = true
}
next()
},
activated () {
// 如果不是从详情页面返回，则重新加载数据
if (!this.$route.meta.isBack) {
//加载页面数据
}
// 从新设置页面得路由元信息
this.$route.meta.isBack = false
}进入页面时，首先判断是否从详情页返回。若在路由元信息中标志从详情返回，则在页面加载过程中判断该标志，若为真则不加载数据；否则重新加载页面数据。最后需重置页面路由元信息，防止下次默认isBack为true导致其他页面进入时不加载数据。
以上为个人经验分享，旨在提供参考，感谢支持。
Vue前端日历插件VCalendar集成与使用指南
2026-10-31 18:16:55
uniapp scroll-view 组件实战：Vue3 改造与滚动逻辑详解
2026-10-31 14:49:47
ElementUI el-calendar 周月视图切换与自定义实现
2026-10-31 14:48:43
Vue Element UI 结合 sortable.js 实现嵌套表格行内拖拽排序
2026-10-31 13:57:34
el-input 限制输入只允许输入浮点型的解决思路
2026-10-31 12:30:12
