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

将之前的搜索条件保存到cookie 中,从指定页面(详情页或列表页)返回到搜索条件页面后,从cookie中获取之前存入的参数。
1、发出查询请求前,将参数存入cookie中。
2、从详情页面回到查询页,从cookie中获取之前存入的参数。

data{
	return {
   	  formPath:'',
   	  queryData:{
   	     //将startData、endDate 设置为今天
           startDate:moment().subtract(1, 'days').format('YYYYMMDD'),
           endDate :moment().subtract(1, 'days').format('YYYYMMDD') 
        }
    }
},
//获取上一个页面的路由
beforeRouteEnter (to, from, next){
     next(vm => {
       // 通过 `vm` 访问组件实例,将值传入fromPath
       vm.fromPath = from.path
       vm.getCookie(vm.fromPath);
     })
},
methods:{
 	//设置cookie
       setCookie() {
       	   //获取当前路由,将当前页面的路由作为name存入cookie中
           let name = this.$route.path;
           //需要存入的参数
           let value =[this.queryData.startDate,this.queryData.endDate];
           let day = '1';
           if (day !== 0) {
               var expires = day * 24 * 60 * 60 * 1000;
               var date = new Date(+new Date() + expires);
               document.cookie = name + "=" + escape(JSON.stringify(value)) + ";expires=" + date.toUTCString();
           } else {
               document.cookie = name + "=" + + escape(JSON.stringify(value));
           }

       },
       //从cookie中获取之前存入的参数 
       //data为指定页面的路由,当从指定页面返回到当前页面时才到cookie中获取上一次存入的参数 。
       getCookie(data){
         if("/AgeJcdSexPage" == data){
           var arr;
           var name = this.$route.path;
           var reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
           if (arr = document.cookie.match(reg)){
             var test = JSON.parse(unescape(arr[2]));
             this.queryData.startDate=test[0];
             this.queryData.endDate=test[1];
           } 
         }  
       },
       doQuery(){
         //查询前,将查询条件设置cookie中
         this.setCookie();          
         //将参数带入到下一个页面进行请求
         this.$router.push({name: 'AgeJcdSexPage', query: this.queryData})
       }
  }       
Logo

前往低代码交流专区

更多推荐