keep-alive 实现页面缓存
一、使用场景在vue实际开发中(开发的都是单页应用),我们都使用Vue-Router做页面导航,而每次切换路由的时候,页面都是会进行重新加载的,对应的所有周期页面被重新执行一遍。但是,有一些场景却需要我们把页面状态保存下来,否则用户体验很不好,如:分页列表中,假设我们已经切换到第五页,这时我们进入了其中一条数据的详情页面,然后返回,这时如果不做特殊处理,会重新执行created 和 mounted
一、使用场景
在vue
实际开发中(开发的都是单页应用),我们都使用Vue-Router
做页面导航,而每次切换路由的时候,页面都是会进行重新加载的,对应的所有周期页面被重新执行一遍。
但是,有一些场景却需要我们把页面状态保存下来,否则用户体验很不好,如:
- 分页列表中,假设我们已经切换到第五页,这时我们进入了其中一条数据的详情页面,然后返回,这时如果不做特殊处理,会重新执行
created
和mounted
生命周期,从而重新加载页面,默认就显示到第一页去了,绝望!! - 一个列表页中,存在条件筛选,查询到相关数据后,跳转到详情页面,然后再返回,列表默认会清空查询条件,显示所有数据。
二、keep-alive是什么
keep-alive
是Vue
提供的一个内置组件,被keep-alive
组件包裹的内部组件,其状态将被缓存keep-alive
包裹的组件,其生命周期只能被执行一次,再次进入时不会被执行keep-alive
包裹的组件,会自动新增两个生命周期函数activated
和deactivated
,每次进入都会被执行keep-alive
两个属性include
和exclude
,可以让keep-alive
实现有条件的进行缓存。include
匹配到的组件会被进行缓存,exclude
匹配到的组件不会被缓存
三、keep-alive 实现路由页面缓存
keep-alive
实现路由缓存主要有三种方式:
1. 缓存所有
<keep-alive>
<router-view></router-view>
</keep-alive>
缺点:这样将缓存整个项目的所有路由
2. 使用include
或者exclude
include
和exclude
可以使用逗号分隔的字符串、正则、数组;并且匹配的都是组件的name属性
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
<router-view></router-view>
</keep-alive>
<!-- 正则表达式-->
<keep-alive :include="/a|b/">
<router-view></router-view>
</keep-alive>
<!-- 数组 -->
<keep-alive :include="['a', 'b']">
<router-view></router-view>
</keep-alive>
缺点:这样缓存页面,虽然可以实现部分组件的缓存,但是会出现生命周期只执行一次,第二次不管从什么地方进入,都不能重新加载页面
3. 根据v-if控制显示的router-view(条件缓存)
优点:可以实现从指定页面进入时缓存进入的页面,而从其余地方进入,进入的页面将被重新加载
如:一个List
页面,只有从对应的Detial
返回(跳转到列表)时,页面被缓存,而当从其余地方跳转到这个List
组件时,页面都会被重新加载
实现步骤:
3.1 在需要路由缓存的页面路由meta
属性中新增keepAlive
,默认为true
{
path: '/list',
name: 'List',
component: () => import('@/views/list/index.vue'),
meta: {
keepAlive: true
}
}
3.2 设置keep-alive
包裹router-view
// home.vue 或者 page.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>
3.3 在路由守卫钩子中,控制页面是否缓存
- List 页面
export default {
// 从List页面离开时,修改keepAlive值为false,保证进入该页面时页面刷新
beforeRouteLeave(to, from, next) {
from.meta.keepAlive = false
next()
}
}
- Detail 页面
export default {
// 从Detail返回List时,修改List的keepAlive为true, 确保返回List页面时使用缓存不刷新页面
// 因为离开List时,keepAlive被设置为了false;所以这时候不管从哪里进入到List页面,都是没有keep-alive缓存的;而在Detail离开的时候,又将List对应的keepAlive设置为了true,所以从Detail进入到List 就实现了页面缓存
beforeRouteLeave(to, from, next){
if(to.name === 'List') {
to.meta.keepAlive = true
}
next()
}
}
文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!
更多推荐
所有评论(0)