第一步硅堆，設置緩存組件 router
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
第二步在路由里面添加二個參數(shù)渺鹦，第一個參數(shù)叫keepAlive 申明需要緩存的路由,第二個參數(shù)叫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
這樣就可以實現(xiàn)在訂單管理頁面參數(shù)搜索 ，然后進入訂單詳情后退到訂單管理還是保留上次操作的狀態(tài)痊夭，如果從商品管理進入訂單管理，就會重置訂單管理的所有搜索的參數(shù)
