vue keep-alive组件后退缓存页面搜索参数 重新进入重置页面搜索参数

第一步，设置缓存组件 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

这样就可以实现在订单管理页面参数搜索 ，然后进入订单详情后退到订单管理还是保留上次操作的状态，如果从商品管理进入订单管理，就会重置订单管理的所有搜索的参数