vue前台（六点一）

一，解决search多次跳转返回不能一次返回到首页

1.在search组件中，将push改成replace,没有路由历史记录，可以直接返回到home页

1.1, 在从search页跳转到search页，不需要有路由记录，直接用replace

 //删除面包屑的类别名称
    removeCategoryName() {
      this.searchParams.categoryName = "";
      this.searchParams.pageNo = 1;
      // 删除面包屑路径当中对应的类别名称还在
      // 不能在这直接发请求，因为这样路由是不变化的
      // 我们应该让路由去变化，发请求
      // this.getGoodsListInfo();
      // this.$router.push({name:'search',params:this.$route.params})
      this.$router.replace({ name: "search", params: this.$route.params });
    },
    //删除面包屑的关键字keyword
    removeKeyword() {
      this.searchParams.keyword = "";
      this.searchParams.pageNo = 1;
      this.$bus.$emit("clearKeyword"); //使用全局时间总线通知header组件去清空关键字搜索框
      // this.getGoodsListInfo();
      // this.$router.push({name:'search',query:this.$route.query})
      this.$router.replace({ name: "search", query: this.$route.query });
    },

1.2, 对于typenav组件，在home路径和search路径都有，我们需要判断下它在哪个路径下，如果是在search路径，则跳转路由时用replace

 //点击分类跳转到search
    toSearch(event) {
      let data = event.target.dataset; //拿到所有儿子元素身上所有的自定义属性组成的一个对象
      // console.log(data)
      let { categoryname, category1id, category2id, category3id } = data;

      if (categoryname) {
        //点的一定是a标签，我们要点的
        let location = {
          name: "search"
        };
        let query = {};
        query.categoryName = categoryname

        if (category1id) {
          query.category1Id = category1id
        } else if (category2id) {
          query.category2Id = category2id
        } else {
          query.category3Id = category3id
        }
        
        location.query = query

        //点击三级分类的时候，我们也不能光关注query参数，也要去看看之前有没有params参数
        //如果有，需要把之前的params参数也带上
        let {params} = this.$route
        if(params){
          location.params = params
        }

        //看是否是从首页去到search页
        if(this.$route.path != '/home'){
          this.$router.replace(location);
        }else{
          this.$router.push(location);
        }
        
      }
    }

 1.3, 在header组件，路由跳转，也要判断下是处于哪个路径下跳转，在search路径跳转，用replace

 //看是否是从首页去到search页
      if (this.$route.path != "/home") {
        this.$router.replace(location);
      } else {
        this.$router.push(location);
      }

响应式对象属性的添加和删除

对象当中的属性数据更改会导致页面更改，响应式数据
    
    添加：
        错的：如果对象当中没有对应的属性数据： 直接添加一个属性，这个属性不是响应式的
            因为vue只是在开始对对象当中的所有属性添加getter和setter，后期直接添加的没有
        
        对的：我们需要使用Vue.set方法  这样的添加属性就是响应式的   必须对响应式对象添加属性
            
    删除：
        错的： 直接delete删除对象当中的属性，不会导致页面更改
            因为响应式属性只是在检测属性值的改变而不是检测属性的删除

        对的：我们需要使用Vue.delete方法  除了删除，还添加了更新界面的操作

二，阿里图标字体在线使用

在在public文件夹的html中引入图标css连接，前面加https:

在html中引入

    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1952968_i6qdilxadv.css">
  </head>

在search组件的模板中引入图标类

<li>
                  <a href="#">价格
                    <i class=" iconfont icondown"></i>
                  </a>
                </li>

三，排序的背景色，图标的动态显示

 <ul class="sui-nav">
                <li class="active">
                  <a href="#">综合
                    <i class="iconfont iconup"></i>
                  </a>
                </li>
                <li>
                  <a href="#">销量</a>
                </li>
                <li>
                  <a href="#">新品</a>
                </li>
                <li>
                  <a href="#">评价</a>
                </li>
                <li>
                  <a href="#">价格
                    <i class=" iconfont icondown"></i>
                  </a>
                </li>
              
              </ul>

3.1，active这个类是死的，只是对综合的样式起作用，我们需要搞成动态的类，让他点击价格，动态也显示

   order: "2:desc", //排序标志：排序类型    1代表综合排序 2代表价格排序 asc升序  desc降序

 <li :class="{active:searchParams.order.split(':')[0] === '1'}">
                  <a href="#">综合
                    <i class="iconfont iconup"></i>
                  </a>

   <li :class="{active:searchParams.order.split(':')[0] === '2'}">
                  <a href="#">价格
                    <i class=" iconfont icondown"></i>
                  </a>
                </li>

3.2 ，但是，此时如果类是指向了综合，那么价格的箭头需要隐藏，此时箭头这个类也需要动态显示

 <li :class="{active:searchParams.order.split(':')[0] === '1'}">
                  <a href="#">综合
                    <i class="iconfont iconup"  v-if="searchParams.order.split(':')[0] === '1'"></i>
                  </a>
                </li>

<li :class="{active:searchParams.order.split(':')[0] === '2'}">
                  <a href="#">价格
                    <i class=" iconfont icondown" v-if="searchParams.order.split(':')[0] === '2'"></i>
                  </a>
                </li>

3.3， 此时各类指标的向上箭头和向下箭头显示也是动态显示，

 <li :class="{active:searchParams.order.split(':')[0] === '1'}">
                  <a href="#">综合
                    <i class="iconfont " 
                    :class="{iconup:searchParams.order.split(':')[1] === 'asc', icondown:searchParams.order.split(':')[1] === 'desc'}"
                    
                     v-if="searchParams.order.split(':')[0] === '1'"></i>
                  </a>
                </li>

 <li :class="{active:searchParams.order.split(':')[0] === '2'}">
                  <a href="#">价格
                    <i class=" iconfont" 
                     :class="{iconup:searchParams.order.split(':')[1] === 'asc', icondown:searchParams.order.split(':')[1] === 'desc'}"
                    v-if="searchParams.order.split(':')[0] === '2'"></i>
                  </a>
                </li>

3.4， 用户点击各类指标，如果点击的是同一个指标，更改他的排序规则， 如果点击的不是同一个指标，默认排序为desc

 <li :class="{active:searchParams.order.split(':')[0] === '1'}">
                  <a href="javascript:;" @click="sortGoods('1')">综合
                    <i class="iconfont " 
                    :class="{iconup:searchParams.order.split(':')[1] === 'asc', icondown:searchParams.order.split(':')[1] === 'desc'}"
                    
                     v-if="searchParams.order.split(':')[0] === '1'"></i>
                  </a>
                </li>

<li :class="{active:searchParams.order.split(':')[0] === '2'}">
                  <a href="javascript:;"  @click="sortGoods('2')">价格
                    <i class=" iconfont " 
                     :class="{iconup:searchParams.order.split(':')[1] === 'asc', icondown:searchParams.order.split(':')[1] === 'desc'}"
                    v-if="searchParams.order.split(':')[0] === '2'"></i>
                  </a>
                </li>

js代码

 //排序的所有
    sortGoods(sortFlag){
      //优化前
      // let originFlag = this.searchParams.order.split(':')[0]
      // let originType= this.searchParams.order.split(':')[1]
      //优化后
      let originFlag = this.sortFlag
      let originType= this.sortType

      let newOrder //准备改变的排序规则

      if(sortFlag === originFlag){
        //证明标志一样，点的还是原来排序的项
        newOrder = `${sortFlag}:${originType === 'desc'?'asc':'desc'}`
      }else{
        //如果原始的排序flag和传过来的flag不一样，证明点击的不是原来的排序项
        newOrder = `${sortFlag}:desc`
      }

      //排序规则改变后，需要重新发请求拿新的排序规则的数据
      this.searchParams.order = newOrder
      this.getGoodsListInfo();
    },

类的颜色

.active {
                a {
                  background-color: #fff;
                  color: #e1251b;
                  border-color: #fff;
                  cursor: default;
                }
              }

初始化数据

 data() {
    return {
      //初始化搜索参数（收集搜索参数）
      //为搜索请求提供搜索参数
      searchParams: {
        category1Id: "",
        category2Id: "",
        category3Id: "",
        categoryName: "",
        keyword: "",
        order: "2:desc", //排序标志：排序类型    1代表综合排序 2代表价格排序 asc升序  desc降序
        // 当前页码数
        pageNo: 1,
        // 每页图片数
        pageSize: 4,
        props: [],
        trademark: ""
      },
    };
  },

 3.5 排序规则代码优化，对类型指标和排序规则代码优化

 computed: {
    ...mapGetters(["attrsList", "trademarkList", "goodsList"]),
    originFlag(){
      return  this.searchParams.order.split(':')[0]
    },

    originType(){
      return this.searchParams.order.split(':')[1]
    }

  },

模板代码优化下，更直观

  <!-- 优化后 -->
                <li :class="{active:sortFlag === '1'}">
                  <a href="javascript:;" @click="sortGoods('1')">
                    综合
                    <i
                      class="iconfont"
                      :class="{iconup:sortType==='asc',icondown:sortType==='desc'}"
                      v-if="sortFlag === '1'"
                    ></i>
                  </a>
                </li>