vue尚品汇-面包屑导航

1，html代码-src\pages\Search\index.vue

<ul class="fl sui-tag">
          <!-- 分类名称，当有searchParams.categoryName属性时才会显示面包屑 -->
          <li class="with-x" v-if="searchParams.categoryName">{{ searchParams.categoryName }}<i @click="removeCategoryName">×</i></li>
          <!-- 搜索关键字 -->
          <li class="with-x" v-if="searchParams.keyword">{{ searchParams.keyword }}<i @click="removeKeyword">×</i></li>
          <!-- 品牌名称 -->
          <li class="with-x" v-if="searchParams.trademark">{{ searchParams.trademark.split(":")[1] }}<i @click="removeTrademark">×</i></li>
          <!-- 商品属性 -->
          <li class="with-x" v-for="(attrValue, index) in searchParams.props" :key="index">{{ attrValue.split(":")[1] }}<i @click="removeAttr(index)">×</i></li>
        </ul>
      </div>
      <!--SearchSelector组件：筛选条件-->
      <SearchSelector @trademarkInfo="trademarkInfo" @attrInfo="attrInfo"/>

2，方法

<script>
import {mapGetters} from 'vuex'
import SearchSelector from './SearchSelector'

export default {
  name:'Search',
  components:{
    SearchSelector
  },
  data() {
    return {
      searchParams:{
        // 1, 2, 3, 级分类的id, 从home跳转到search时传入
        category1Id: "",
        category2Id: "",
        category3Id: "",
        // 分类名字, 关键字
        categoryName: "",
        keyword: "",
        // 排序
        order: "",
        // 分页器, 代表当前是第几页
        pageNo: 1,
        // 代表每一个展示数据的个数
        pageSize: 3,
        // 平台售卖属性操作带的参数
        props: [],
        // 品牌
        trademark: "",
      }
    }
  },
  beforeMount() {  //在挂载之前合并参数-仅执行一次，参数变化多次搜索还得想别的办法
    // 复杂的写法
    // this.searchParams.category1Id = this.$route.query.category1Id;
    // this.searchParams.category2Id = this.$route.query.category2Id;
    // this.searchParams.category3Id = this.$route.query.category3Id;
    // this.searchParams.categoryName = this.$route.query.categoryName;
    // this.searchParams.keyword = this.$route.query.keyword;
    Object.assign(this.searchParams, this.$route.query, this.$route.params);
    // console.log(this.searchParams, this.$route.query, this.$route.params);
  },
  mounted() {
    // 放在挂载中，只会执行一次
    // this.$store.dispatch('getSearchList')
    // 所以需要把向服务器请求数据封装成一个函数，根据不同参数多次请求
    this.getData()
  },
  computed:{
    ...mapGetters(['goodsList'])
  },
  methods:{
    // 向服务器发送请求，获取search模块数据
    getData(){
      this.$store.dispatch('getSearchList',this.searchParams)
    },
    // 删除面包屑名字
    removeCategoryName() {
      // 把带给服务器的参数(name, id)清空, 还需要再次向服务器发请求
      // 清空时传空字符串, 还会把相应的字段带给服务器,  如果设为undefined则不会把相应的字段带给服务器(节省宽带), 但前提是这些字段不是必要的
      this.searchParams.categoryName = undefined;
      this.searchParams.category1Id = undefined;
      this.searchParams.category2Id = undefined;
      this.searchParams.category3Id = undefined;
      this.getData();
      // 地址栏也需要修改, 进行路由跳转(当跳转时如果带有params参数则, 则携带params参数跳转到search, 就是只把query参数干掉)
      if(this.$route.params) { // this.$route.params不管是否是空对象，都为真，不知道判断有什么用
        console.log('params参数为真',this.$route.params);
        this.$router.push({name:'search', params: this.$route.params});
      }
    },
    // 删除面包屑的关键字
    removeKeyword() {
      // 把带给服务器的参数(keyword)清空, 还需要再次向服务器发请求
      this.searchParams.keyword = undefined;
      this.getData();
      // 发出清除关键字的请求-兄弟组件间通信：通过main.js里面的全局事件总线，清空Header组件中的keyword
      this.$bus.$emit('clear');
      // 清除params参数
      if(this.$route.query) {
        // 携带query参数进行路由跳转
      	this.$router.push({name: 'search', query: this.$route.query})
      }
    },
    // 获取子组件发送的参数: trademark：子组件SearchSelector里面点击品牌，把品牌名称，品牌id发送到父组件Search.vue，然后整理参数，向服务器请求数据
    trademarkInfo(trademark) {
      // 整理品牌字段参数, (id:品牌名称)
      this.searchParams.trademark = `${trademark.tmId}:${trademark.tmName}`
      // 再次发送请求
      this.getData()
      console.log('我是父组件', trademark);
    },
    // 删除品牌面包屑
    removeTrademark() {
      // 把带给服务器的参数(tmId, tmName)清空, 还需要再次向服务器发请求
      this.searchParams.trademark = undefined
      this.getData()
    },
    //  获取子组件发送的参数: attr, attrValue
    attrInfo(attr, attrValue) {
      console.log(attr, attrValue)
      // 整理参数 属性id: 属性值: 属性名  (注意模板字符串里不能有空格)
      let props = `${attr.attrId}:${attrValue}:${attr.attrName}`
      // 将整理的参数添加到 data 里的props数组
      // 数组去重(当indexOf检测到数组下标为-1时, 即数组里没有数据时, 才进行添加)
      if (this.searchParams.props.indexOf(props) == -1) {
        this.searchParams.props.push(props)
      }
      // 再次发送请求
      this.getData()
    },
    // 删除平台售卖属性面包屑
    removeAttr(index) {
      console.log(index)
      // 整理参数 (从点击获取到的索引值开始删除, 每次删除一个)
      this.searchParams.props.splice(index,1)
      // 再次发送请求
      this.getData()
    }
  },
  // 数据监听: 监听组件实例身上的属性的属性值变化 
  watch: {
    // 监听路由的信息是否发生变化, 如果发生变化, 则再次发起请求
    $route(newValue, oldValue) {
      // 再次发请求之前整理带给服务器参数
      Object.assign(this.searchParams, this.$route.query, this.$route.params);
      // 在次发送 ajax请求
      this.getData()
      console.log(this.searchParams, this.$route.query, this.$route.params);  
      //如果下一次搜索时只有params参数，拷贝后会发现searchParams会保留上一次的query参数
      //所以每次请求结束后将相应参数制空
      this.searchParams.category1Id = ''
      this.searchParams.category2Id = ''
      this.searchParams.category3Id = ''
    },
  } 
}
</script>

//main入口文件 
beforeCreate() {
    // 把vue实例(vm)赋给, Vue原型对象上的$bus属性
    Vue.prototype.$bus = this
  }
---------------------
//Header
mounted() {
    // 在挂载时, 回应兄弟组件search的清除关键字请求
    this.$bus.$on('clear', () => {
      this.keyword = '';
    })
  }

<template>
  <div class="clearfix selector">
        <div class="type-wrap logo">
          <div class="fl key brand">品牌</div>
          <div class="value logos">
            <ul class="logo-list">
              <li v-for="tm in trademarkList" :key="tm.tmId" @click="tradeMarkHandler(tm)">{{tm.tmName}}</li>
            </ul>
          </div>
          <div class="ext">
            <a href="javascript:void(0);" class="sui-btn">多选</a>
            <a href="javascript:void(0);">更多</a>
          </div>
        </div>
        <div class="type-wrap" v-for="attr in attrsList" :key="attr.attrId">
          <div class="fl key">{{attr.attrName}}</div>
          <div class="fl value">
            <ul class="type-list">
              <li v-for="(attrValue,index) in attr.attrValueList" :key="index" @click="attrHandler(attr,attrValue)">
                <a>{{attrValue}}</a>
              </li>
            </ul>
          </div>
          <div class="fl ext"></div>
        </div>
      </div>
</template>

<script>
import {mapGetters} from 'vuex'

export default {
  name:'SearchSelector',
  computed:{
    ...mapGetters(['attrsList','trademarkList'])
  },
  methods: {
    // 品牌点击事件
    tradeMarkHandler(trademark){
      this.$emit('trademarkInfo',trademark)
    },
    // 商品属性点击事件
    attrHandler(attr,attrValue){
      this.$emit('attrInfo',attr,attrValue)
    }
  },
};
</script>