【Vue项目心得笔记】电商网站的“面包屑”

标题说的“面包屑”是下图所示的小方块，可以方便的筛选用户需要的物品的各种属性。

 利用vue设计出这种面包屑需要很多的请求

面包屑包括在主页全部商品分类点击的面包屑，输入关键字产生的面包屑，点击下方品牌产生的面包屑，还有点击售卖属性的面包屑。

带给服务器的参数

  data(){
       return{
           //带给服务器的参数
           searchParams:{
               //一级分类id
                "category1Id": "",
                //二级分类id
                "category2Id": "",
                //三级分类id
                "category3Id": "",
                //分类名字
                "categoryName": "",
                //关键词
                "keyword": "",
                //排序
                "order": "",
                //分页器，代表当前第几页
                "pageNo": 1,
                //代表一页展示多少数据
                "pageSize": 5,
                //平台售卖属性
                "props": [],
                //品牌
                "trademark": ""

           }
       }
    }

 各种面包屑的结构

            
            
{{searchParams.categoryName}}×
            
            
{{searchParams.keyword}}×
            
            
{{searchParams.trademark.split(":")[1]}}×
            
            
{{attrValue.split(":")[1]}}×


        

当删除小面包屑的时候，也要把路由的路径改变，包括query参数和params参数

      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.params.keyword

        //Object.assign:ES6新增语法
        Object.assign(this.searchParams,this.$route.query,this.$route.params)
    },  
       methods:{
        //向服务器发请求获取search模块数据
        getData(){
            this.$store.dispatch('getSearchList',this.searchParams)
        },
        //删除分类的名字面包屑
       removeCategoryName(){
         //只是把服务器的数据置空了，需要再发请求
         //带给服务器参数说明可有可无的，如果这个属性值为空的字符串还是会把相应的字段带给服务器
         //但是把相应的字段改为undefined，当前这个字段不会带给服务器
         this.searchParams.categoryName=undefined
         this.searchParams.category1Id=undefined
         this.searchParams.category2Id=undefined
         this.searchParams.category3Id=undefined
         this.getData()
         //地址栏也需要修改:进行路由跳转
         //严谨：本意是删除query，如果路径当中重新params参数，不应该删除 应该保留
         if(this.$route.params){
            this.$router.push({name:"search",params:this.$route.params})
         }
       },
       //删除关键字
       removeKeyword(){
         //给服务器带的参数searchparams的keyword置空
         this.searchParams.keyword = undefined
         //再次发请求
         this.getData()
         //通知兄弟组件Header清除关键字
         this.$bus.$emit("clear")
         //进行路由跳转
         if(this.$route.query){
            this.$router.push({name:"search",query:this.$route.query})
         }
       },
       //品牌信息的自定义事件回调
       trademarkInfo(trademark){
          //1、整理品牌字段的参数
          this.searchParams.trademark = `${trademark.tmId}:${trademark.tmName}`
          //再次发请求获取search模块的数据
          this.getData()
       },
       //删除品牌的信息
       removeTrademark(){
          //将品牌的信息置空
          this.searchParams.trademark = undefined
          //再次发请求
          this.getData()
       },
       //收集平台属性地方回调函数---自定义事件
       attrInfo(attr,attrValue){
         let props = `${attr.attrId}:${attrValue}:${attr.attrName}`
         //数组去重
         if(this.searchParams.props.indexOf(props)==-1){
           this.searchParams.props.push(props)
         }
         //再次发请求
         this.getData()
       },
       //删除售卖属性
       removeAttr(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()
        //每次请求完毕，应该把相应的123级分类的id置空，让他接收新的id
        this.searchParams.category1Id=undefined
        this.searchParams.category2Id=undefined
        this.searchParams.category3Id=undefined
      }
    }

平台的售卖属性是子组件

        
        

          
{{trademark.tmName}}
 
        
      

多选 更多

{{attr.attrName}}

• {{attrValue}}

请求 利用自定义事件

 methods:{
      //品牌的处理函数
      tradeMarkHandler(trademark){
        //点击了品牌 还是需要整理参数，向服务器发请求获取相应额数据进行展示
        //在哪个组件发请求
        //父组件  因为父组件的searchParams参数是带给服务器参数，子组件吧你点击的品牌的信息，需要给父组件传递过去----自定义事件
          this.$emit('trademarkInfo',trademark)
      },
      //平台售卖属性值得点击事件
      attrInfo(attr,attrValue){
         this.$emit("attrInfo",attr,attrValue)
       }
    }