Vue电商项目搜索板块面包屑的实现

在不同的板块是会形成不同的面包屑的，在这里我们需要将搜索的参数传递给服务器，从home主页跳转到search页面的时候是带着路由参数的，我们需要将参数在beforeMount()里面整合一下

我们需要什么时候带着这个参数去请求服务器，当路由信息发生变化的时候，因为我们将搜索的信息设置为params参数和query参数，所以我们要监听路由的信息，然后整合要发送过去的参数

  searchParam:{
      "category1Id": "",
      "categoryName": "",
      "keyword": "",
      // 1代表综合，desc代表降序 2代表价格 aesc代表升序
      "order": "1:desc",
      // 分页器的当前的页数
      "pageNo": 1,
      // 分页器的总数
      "pageSize": 3,
      // "props": ["1:1700-2799:价格", "2:6.65-6.74英寸:屏幕尺寸"],
      "trademark": "",
       "props":[],
    },

 beforeMount()
     {
      //  合并对象,将传递过来的params参数和query参数，里面一样的名字的数据会代替searchParams里面的数据
          Object.assign(this.searchParam,this.$route.params,this.$route.query)
     },

watch:{
      $route(newValue,oldValue)
      {
        // 当路由里面的信息发送变化，路由里面的请求参数会发生变化，就发生请求
        // 整合发给服务器的参数
         Object.assign(this.searchParam,this.$route.params,this.$route.query);
        //  发送请求
        this.getData(this.searchParam);
        // 因为进入到search模块后，用户去操作三级联动，三级联动是有三个id,1id,2id,3id,但是用户只能选择其中的一个
        // 如果上次选的1id,后面选的2id，就需要把之前的1id置空，保证每次参数的准确性
        this.$route.query.category1Id = undefined
        // this.$route.query.category2Id = ""
        // this.$route.query.category3Id = ""
      }
    }

①.商品分类的面包屑，当点击三级联动的商品分类的时候，会设置params参数和关键字的query参数，结构的实现，使用v-if,并且设置除去面包屑的点击函数，当params参数和query参数发生变化的时候，会监听到，然后再去发送请求

   <!-- 商品分类的面包屑 -->
          <ul class="fl sui-tag">
            <li class="with-x" v-if="searchParam.categoryName">{{searchParam.categoryName}}<i @click="removeCategoryName">×</i></li>
          </ul>

 removeCategoryName()
      {
        // 置空,当为undefined的时候，不会作为参数传递给服务器
        this.searchParam.categoryName = undefined
        this.searchParam.category1Id = undefined
        // 然后自己跳转自己
        if(this.$route.params)
        {
          this.$router.push({name:'search',params:this.$route.params});
        }
        this.$router.push({name:'search'});
      },

②关键字的面包屑，关键字是query参数

 <!-- 关键字的面包屑 -->
           <ul class="fl sui-tag">
            <li class="with-x" v-if="searchParam.keyword">{{searchParam.keyword}}<i @click="removeKeyword">×</i></li>
          </ul>

   removeKeyword()
      {
        // 将keyword置空
        this.searchParam.keyword = undefined
        // 要删除header搜索框的关键字,使用全局事件总线
        this.$bus.$emit('deleteKeyword',this.searchParam.keyword);

        if(this.$route.query)
        {
          this.$router.push({name:'search',query:this.$route.query});
        }
         this.$router.push({name:'search'});
       
      },

③品牌分类的面包屑，通过自定义事件的实现，子组件向父组件发送数据，把点击的品牌的数据给

   父组件

 <!-- 品牌分类的面包屑 -->
          <ul class="fl sui-tag">
            <li class="with-x" v-if="searchParam.trademark">{{searchParam.trademark.split(':')[1]}}<i @click="removeTrademark">×</i></li>
          </ul>

 //自定义事件
      getRrademark(trademark)
      {
          this.searchParam.trademark = `${trademark.tmId}:${trademark.tmName}`
          // 再次发送请求
          this.getData(this.searchParam);
      },

 removeTrademark()
      {
        this.searchParam.trademark = undefined;
        // 再次发送请求
        this.getData(this.searchParam);
      },