vue 详情页返回列表页，保留列表页之前的筛选条件

需求场景：

在列表页进行一系列的筛选条件之后，点击某一个进入详情页，当从详情页返回列表页的时候，需要保留之前的筛选条件。

最开始的实现方法：

路由跳转的时候，把筛选条件json对象放到query中去，传到详情页，返回的时候再带回来，会导致在url后面一直会有这么一堆东西

在网上查到的方法：

实现从详情页返回列表页，保留列表页之前的筛选条件

在此基础上我抛弃了cookie，直接用vueX + 生命周期中的beforeRouteLeave、beforeRouteEnter轻松实现

不说了，直接上代码：

vuex中：

export default new Vuex.Store({
          
   
	state: {
          
   
		changeFilter: {
          
   }//存储变更列表筛选条件
	}
	mutations: {
          
   
    	setChangeFilter (state, changeFilter) {
          
   
      		state.changeFilter = changeFilter;
    	}
    }
});

列表页：

isFilters: false,   //列表页是否进行列表筛选

// 点击查询按钮时赋值
this.isFilters= true;

// 当路由离开列表页之前
beforeRouteLeave(to,from,next){
          
   
	// 当to的路由为详情页面时且isFilters为true（列表页面进行了筛选）时触发
	if (to.path === /home/projectBlueprintInfo && this.isFilters){
          
   
		// 将筛选项赋值给changeFilter
		this.$store.commit(setChangeFilter,this.filters);
    }
    next();
},
// 当路由进入列表页之前
beforeRouteEnter(to,from,next) {
          
   
	//当from的路由为详情页面时触发
    if (from.path === /home/projectBlueprintInfo){
          
   
        next((vm) =>{
          
   
          	if (vm.$store.state.changeFilter !== {
          
   }) {
          
   
          		// 把changeFilter值赋给当前筛选项的对象
            	vm.filters = vm.$store.state.changeFilter
          	}
        });
    }else{
          
   
        next()
    }
    // beforeRouteEnter中不能直接获得this，需要 next ((vm) =>{ vm.$stroe.state.changeFilter })这样获取，而且next里的方法要在create之后执行
},

详情页：

// 当路由离开详情页之前
beforeRouteLeave(to,from,next){
          
   
	//当to的路由为非对应详情页面的列表页面时触发
	if (to.path !== /home/projectAcceptance){
          
   
		// 清空 changeFilter 的值
        this.$store.commit(setChangeFilter,{
          
   });
      }
    next();
},

我这种方法较vue+cookie的方法比较好理解，希望对读者有用哦