應(yīng)用場(chǎng)景：

在確認(rèn)訂單頁(yè)面 里輸入了一些內(nèi)容 但選擇地址切換了路由后 返回來的時(shí)候 以前輸入的內(nèi)容沒有了 。
切換選擇地址的時(shí)候需要把之前頁(yè)面里填寫的內(nèi)容緩存下來。

解決辦法：

監(jiān)聽路由的離開 beforeRouteLeave ，當(dāng)路由切換到選擇地址頁(yè)面的時(shí)候 緩存路由 其他情況需要清除路由的緩存數(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>

*在路由的配置里 需要修改當(dāng)前需要緩存的確認(rèn)訂單頁(yè)面的路由 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: '確認(rèn)下單頁(yè)面',
            keepAlive: true  //加上這個(gè)就不會(huì)出現(xiàn)首次無法緩存路由的問題
        }
    },
]