方法一 keep-alive 结合include属性缓存组件
使用情况:例如一个搜索框,输入文字后,切换到另一个组件,再返回的时候input框的文字会消失,所以要使文本框组件缓存
其实在keep-alive上有两个属性
include 值为字符串或者正则表达式,匹配的组件会被缓存。
exclude 值为字符串或正则表达式,匹配的组件不会被缓存。
// include 只缓存组件名字为home的组件,其他组件不会缓存,而exclude恰好相反
<keep-alive include="home">
<router-view />
</keep-alive>
方法二 keep-alive结合路由中的meta属性来控制组件缓存
{
path: '/',
name: 'home',
meta:{
keepAlive:true
},
component: Home
}
将home的路由规则中的meta添加keepAlive属性为true,则当前路由组件要进行缓存
keep-alive代码可以结合v-if进行包裹,如果meta中的keepAlive为true进行缓存,否侧不进行缓存
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
产生问题
组件被缓存,并没有被销毁,所以组件在切换的时候也就不会被重新创建,也就不会调用created等生命周期函数
解决方法
使用activated与deactivated来获取当前组件是否处于活动状态
我在home组件里面写入了activated与deactivated生命周期函数
activated:组件激活时调用
deactivated:组件停用时调用
activated(){
// 进入home组件的那一刻就会打印
console.log("哎呀看见我了")
console.log("----------activated--------")
},
deactivated(){
// 离开home组件的那一刻就会打印
console.log("讨厌!!你又走了")
console.log("----------deactivated--------")
}