keep-alive是vue官方自带的组件标签,多结合router-view来使用
<keep-alive>
<router-view></router-view>
</keep-alive>
功能介绍
在使用this.$router.push()跳转路由加载组件时,一般情况每次组件都会再次加载,如果组件内有请求也会再次去请求数据,就会造成不必要的请求,影响用户体验;
而keep-alive可以缓存组件,及其中的数据,使再次跳转该路由时其中的组件和数据不会再次请求,大大的提高的页面体验
基本属性简介
// 标签上的两个属性
<keep-alive :include="aliveMenus" :exclude="reMenus" max="10">
<router-view></router-view>
</keep-alive>
// include: 缓存其中的组件,可以在路由发生变化时添加或者减少
// 例:[
// { name: 'a', path: '/a', meta: {}, query: {}, params: {} },
// { name: 'b', path: '/b', meta: {}, query: {}, params: {} }
// ]
// exclude: 不缓存其中的的组件
// max: 最多可以缓存组件的个数
生命周期简介
keep-alive会使包裹的组件新增两个生命周期:
activated:缓存组件激活时触发
执行顺序:首次进入created>mounted>activated,二次进入就只会触发activated
deactivated:缓存组件失活时触发
使用问题
在项目中会遇到这么一个场景:
一个列表显示几个数据,会有一个面包屑记录并显示打开过的组件。例如在列表中选择一条信息查看详情就会打开具体的详情页面。
现在,选择一条列表查看详情打开了一个页面,面包屑加了一个记录。再次回到列表点击另一个查看详情,又会打开另一个详情页面。但是这两个页面所用的组件是同一个,但是在第一次使用时就被缓存了,这时候你新打开的详情页面就是上次的数据,并未更新。
解决方法:
// 1.通过监听路由变化,在watch中监听'$route'
watch: {
'$route'(to, from) {
// 这里的形参to和from与路由拦截的形参是一样的
}
}
// 2.通过路由钩子,beforeUpdate
beforeUpdate (to, from, next) {
// 这里的形参to和from,next与路由拦截的形参是一样的,记住完成操作一定要执行next()才能完成跳转
}