为了实现前进页面展示初始状态，后退保留上次的数据。不过以下实现方式，一个页面只保留一次缓存。这个功能搞了一天，做个记录。
先把router-view 放入keep-alive里
<keep-alive> <router-view ></router-view> </keep-alive> 在router.js里添加一个标识用于判断页面是否需要缓存
{ path:'/home/vikeSearch', component: resolve => require(['../../search.vue'], resolve), meta: { keepAlive: true, // 此组件需要被缓存 } } 添加后退监听。
//判断是否是ie9,9以下无法没找到方法实现 if(IEVersion()==9){ window.onhashchange =function(){ if(ieBackFlag){ Vue.isBack=true; }else{ Vue.ieBackFlag=true; } } }else{ window.onpopstate =function(){ Vue.isBack=true; } } ie9 只能用onhashchange，但onhashchange前进后退都会触发。不过好在前进的话会先触发 beforeEach，所以用ieBackFlag来判断是否是前进。所以在router.js 添加以下事件
router.beforeEach((to, from, next) => { Vue.ieBackFlag=false; next(); } 使用Vue.mixin的方法拦截了路由进入离开事件，实现页面缓存，和缓存清理
Vue.mixin({ //进入时判断是否要用缓存，不要就删除缓存。 beforeRouteEnter:function(to, from, next){ if (!Vue.isBack||!to.meta.keepAlive){ if(to.meta.key&&keepCache[to.meta.key]){ if (keepKeyArr.length>0) { var index = keepKeyArr.indexOf(to.meta.key); if (index > -1) { keepKeyArr.splice(index, 1); } } delete keepCache[to.meta.key]; } } //将判断后退的flag还原 Vue.isBack=false next(vm => { vm.oldUrl = from.path }) }, //离开时判断是否要要销毁缓存 beforeRouteLeave:function(to, from, next){ if (this.$vnode && this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache){ keepCache=this.$vnode.parent.componentInstance.cache; keepKeyArr= this.$vnode.parent.componentInstance.keys; let key = this.$vnode.key == null ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '') : this.$vnode.key; //在meta中做记录，缓存的key from.meta.key=key } if(!from.meta.keepAlive){ if(from.meta.key&&keepCache[from.meta.key]){ if (keepKeyArr.length>0) { var index = keepKeyArr.indexOf(from.meta.key); if (index > -1) { keepKeyArr.splice(index, 1); } } delete keepCache[from.meta.key]; } this.$destroy(); } next(); }, }); 以上。