vue路由的缓存首次无法缓存上 第二切换路由才缓存上

应用场景：

在确认订单页面 里输入了一些内容 但选择地址切换了路由后 返回来的时候 以前输入的内容没有了 。
切换选择地址的时候需要把之前页面里填写的内容缓存下来。

解决办法：

监听路由的离开 beforeRouteLeave ，当路由切换到选择地址页面的时候 缓存路由 其他情况需要清除路由的缓存数据

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  //加上这个就不会出现首次无法缓存路由的问题
        }
    },
]