Vue处理类似Search页面多参数请求

首先我们要获取所有的参数列表，给参数列表初始化

data(){
      return {
        searchParams:{
          //一级分类ID
          category1Id:"",
          //二级分类ID
          category2Id:"",
          //三级分类ID
          category3Id:"",
          //分类名称
          categoryName:"",
          //搜索关键字
          keyword:"",
          //排序规定
          order:"",
          //页码数
          pageNo:1,
          //每页多少数据
          pageSize:10,
          //平台售卖属性操作带的参数
          props:[],
          //品牌
          trademark:""
        }
      }
    },

需要在beforeMount()整合路由里的参数,这里可以一条条赋值，但是更好的方法肯定是通过Object.assgin合并对象

 beforeMount(){
      //object.assign 合并对象
      Object.assign(this.searchParams,this.$route.query,this.$route.params)
    },

因为别的地方也需要发送请求，所以我们需要把发送请求的代码封装成函数，方便调用

    methods:{
      //封装成函数，发送请获取Search数据、根据参数不同返回不同的数据进行展示
      getSearchData(){
        this.$store.dispatch('getSearchInfo',this.searchParams)
      }
    },

页面加载前发送请求，mounted()

	this.getSearchData();

至此，页面能通过路由参数搜索返回数据，但是有一个问题，就是路由参数改变的时候，页面并不会改变，因为我们仅仅在页面加载完成的时候发送了一次请求，所以我们需要在路由改变的时候去发送请求：对头，这会就得用上watch去监听路由了。

    //搜素条件不同，路由信息也会发生变化，通过监听路由信息的改变，再次发送请求
    watch:{
      //监听路由
      $route(newValue,oldValue){
        //合并路由参数
        Object.assign(this.searchParams,this.$route.query,this.$route.params);
        //发送请求
        this.getSearchData();
        //请求完毕应该清空分类id，方便下一次搜索，修改的是searchParams，所以$route并不会变
        this.searchParams.category1Id = '';
        this.searchParams.category2Id = '';
        this.searchParams.category2Id = '';
      }
    }
  }