{
path: 'orderList',
name: 'orderList',
component: () => import('@/pages/order/orderList/index'),
meta: {
title: '訂單列表',
keepAlive: true // 需要緩存
}
},
{
path: 'orderDetails',
name: 'orderDetails',
component: () => import('@/pages/order/orderList/orderDetails'),
meta: {title: '訂單詳情'}
},
<div>
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
// 這種有個弊端就是當(dāng)前緩存的頁面,下次進(jìn)入是重新進(jìn)入了,但是再需要返回到緩存的頁面時,會是第一次緩存的信息,這樣就不行了
beforeRouteLeave(to, from, next) {
// 當(dāng)要去的頁面不是orderDetails的時候，頁面就不需要被緩存
to.name === 'orderDetails' ? from.meta.keepAlive = true : from.meta.keepAlive = false
next();
}
強(qiáng)制移除緩存
首先打印this.$vnode.parent 查看層級
再路由即將離開的時候強(qiáng)制移除
beforeRouteLeave(to, from, next) {
console.log('to==',to)
console.log('from==',from)
console.log('this.$vnode.key ==', this.$vnode)
// 強(qiáng)制移除的時候這句代碼就不需要了
// to.name === 'vehicleLicense' ? from.meta.keepAlive = true : from.meta.keepAlive = false
if(to.name !== 'vehicleLicense' && this.$vnode.parent && this.$vnode.parent.parent.componentInstance.cache) {
let tag = this.$vnode.parent.tag // 當(dāng)前關(guān)閉的組件名
let cache = this.$vnode.parent.parent.componentInstance.cache // 緩存的組件
let keys = this.$vnode.parent.parent.componentInstance.keys // 緩存的組件名
for(let index in keys){
if(cache[keys[index]].tag == tag){
delete cache[keys[index]]
keys.splice(index, 1)
}
}
<meta charset="utf-8">
<meta charset="utf-8">
image.png
