缓存页面keep-alive
2022-07-25 本文已影响0人
懒懒猫
使用场景
一个列表页中存在条件筛选,查询到相关数据后跳转到第二页, 选择一条数据进入详情页,后需要在详情页返回列表页时,列表页不刷新即进入详情页前(第二页,筛选条件依旧存在)的状态,就需要缓存页面。
下来就来讲讲使用keep-alive缓存页面。
keep-alive是什么
- keep-alive是Vue提供的一个内置组件,被keep-alive组件包裹的内部组件,其状态将被缓存
作用
在组件切换过程中 把切换出去的组件保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性
生命周期
keep-alive包裹的组件,会自动新增两个生命周期函数
activated(组件激活时执行)
deactivated(组件失活时执行)
初次进入时:beforeRouteEnter>created > mounted > activated;退出后触发 deactivated
再次进入:beforeRouteEnter> activated,事件挂载的方法等;退出后触发 deactivated(只执行一次的放在 mounted 中;组件每次进去执行的方法放在 activated 中)
keep-alive包裹的组件,其生命周期只能被执行一次,再次进入时不会被执行 ,不使用 keep-alive 时 每次切换组件 会重复销毁组件---创建组件 重复发起请求调取数据
keep-alive实现路由缓存主要有三种方式:
缓存所有
<keep-alive>
<router-view></router-view>
</keep-alive>
使用include或者exclude
include和exclude 可以使用逗号分隔的字符串、正则、数组;并且匹配的都是组件的name属性
数组内的name对应的是component中export出去的name,而不是router的name
缺点:这样缓存页面,虽然可以实现部分组件的缓存,但是会出现生命周期只执行一次,第二次不管从什么地方进入,都不能重新加载页面
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- Array (use `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
根据v-if控制显示的router-view(条件缓存)\
针对该文章的使用场景,推荐使用该方法
- 1.待缓存的页面 meta的keepAlive设置为true,其他设置为false或不设置(该例订单管理列表页)
// 首页
{
path: '/homePage',
name: 'HomePage',
component: () => import('@/views/homePage/index'),
meta: { title: '首页' }
},
// 订单管理
{
path: '/waybill',
name: 'WaybillManage',
component: RouteView,
redirect: '/waybill/list',
meta: { title: '订单管理' },
children: [
{
path: '/waybill/list',
name: 'WaybillManage',
component: () => import('@/views/waybillManage/index'),
meta: { title: '订单管理', keepAlive: true }
},
{
path: '/waybill/list/:id',
name: 'addOrCheck',
component: () => import('@/views/waybillManage/components/addOrCheck'),
hidden: true,
meta: { title: '订单详情' }
}
]
},
- 2.根据v-if设置keep-alive
<!-- 需要缓存的视图组件 -->
<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<!-- 不需要缓存的视图组件 -->
<router-view v-else></router-view>
3.待缓存页面(该例订单管理列表页)index.vue设置keep-alive
离开该页面时,若下一个页面是详情页则缓存,否则不缓存
beforeRouteLeave (to, from, next) {
if (to.name === 'addOrCheck') {
// 进入详情,需要缓存的路由name
from.meta.keepAlive = true
next()
} else {
from.meta.keepAlive = false
next()
}
},