第一步，设置缓存组件 router
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
第二步在路由里面添加二个参数，第一个参数叫keepAlive 申明需要缓存的路由,第二个参数叫active标记下一个进入的路由，用于判断是否需要缓存当前路由用来改变keepAlive的值
{
path:"/Layout/orderIndex",
name:"orderIndex",
component:resolve =>require(["@/view/orderAdmin/order/index.vue"],resolve),
meta:{
title:"订单管理",
keepAlive:true
}
},
{
path:"/Layout/orderDetails",
name:"orderDetails",
component:resolve =>require(["@/view/orderAdmin/order/details.vue"],resolve),
meta:{
title:"订单详情",
active:true
}
},
第三部在需要缓存的页面添加beforerouteleave方法
//订单管理页面
beforeRouteLeave(to,form,next){
if(to.meta.active){
form.meta.keepAlive = true;
next();
}else{
form.meta.keepAlive = false;
next();
}
},
image.png
这样就可以实现在订单管理页面参数搜索 ，然后进入订单详情后退到订单管理还是保留上次操作的状态，如果从商品管理进入订单管理，就会重置订单管理的所有搜索的参数
