應(yīng)用場景：
在確認訂單頁面 里輸入了一些內(nèi)容 但選擇地址切換了路由后 返回來的時候 以前輸入的內(nèi)容沒有了 牺弄。
切換選擇地址的時候需要把之前頁面里填寫的內(nèi)容緩存下來扶关。
解決辦法：
監(jiān)聽路由的離開 beforeRouteLeave ，當路由切換到選擇地址頁面的時候 緩存路由 其他情況需要清除路由的緩存數(shù)據(jù)
vue組件里
export default {
data(){
return{}
},
methods:{
/**
* 銷毀路由（使用keep-alive后 清楚緩存的方法）
*/
destroyRouter(){
let vnode = this.$vnode
let parentVnode = vnode && vnode.parent;
if (parentVnode && parentVnode.componentInstance && parentVnode.componentInstance.cache) {
var key = vnode.key == null
? vnode.componentOptions.Ctor.cid + (vnode.componentOptions.tag ? `::${vnode.componentOptions.tag}` : '')
: vnode.key;
var cache = parentVnode.componentInstance.cache;
var keys = parentVnode.componentInstance.keys;
if (cache[key]) {
this.$destroy()
// remove key
if (keys.length) {
var index = keys.indexOf(key)
if (index > -1) {
keys.splice(index, 1)
}
}
cache[key] = null
}
}
}
},
beforeRouteLeave(to,from,next){
if(to.name === 'addressLists'){
from.meta.keepAlive = true
}else{
this.destroyRouter()
}
next()
}
}
</script>
*在路由的配置里 需要修改當前需要緩存的確認訂單頁面的路由 keepAlive: true *
import Vue from 'vue'
import VueRouter from 'vue-router'
const routes = [
{
path:'/order',
name: 'order',
component: () => import(/* webpackChunkName: "orderCreate" */ 'pages/order/create'),
meta: {
title: '確認下單頁面',
keepAlive: true //加上這個就不會出現(xiàn)首次無法緩存路由的問題
}
},
]
