47-面包屑的业务逻辑

业务逻辑：

　　1，选择或搜索面包屑显示相应内容，并发送相应请求，更改url

　　2，点击面包屑后面的X，发送相应请求，删除搜索框里的值，更改url

1.点击时：

　　先在html结构中把各个分类的参数塞到dataset里

<a @click="goSearch" :data-categroyName="one.categoryName" :data-categroy1Id="one.categoryId">{{ one.categoryName }}</a>

　　然后点击时，在e.target.dataset里拿到值，然后给query赋值，如果有params参数就整合一块用编程式路由导航进行跳转对应组件(组件mounted里有发送的请求，加载组件就会发送请求)

goSearch(e) {
      const { categroyname, categroy1id, categroy2id, categroy3id } = e.target.dataset;
      if (categroyname) {
        // 点击的a标签
        // 整理路由参数
        let location = { name: "search" };
        let query = { categoryName: categroyname };
        // 添加层级属性
        if (categroy1id) {
          query.categroy1Id = categroy1id;
        } else if (categroy2id) {
          query.categroy2Id = categroy2id;
        } else {
          query.categroy3Id = categroy3id;
        }
        // 如果路由中有params参数，也要带着
        if(this.$route.params){
            // 整理路径
            location.query = query;
            location.params = this.$route.params
        }
        this.$router.push(location);
      }
    },

2.点击搜索时

　　整合query参数，编程式路由携带参数跳转(跳转的路由有mounted,里面有发送的请求)

goSearch(){
            // 如果有query参数，除了params也要携带query参数
            if(this.$route.query){
                let location = {name:'search',params:{keyword:this.keyWord || undefined}}
                location.query = this.$route.query
                this.$router.push(location)
            }

3.面包屑的展示

　　用v-if来显示隐藏，一个用来展示菜单选项的，一个用来展示搜索的

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

4.点击菜单选项的X  (删除query参数)

　　该面包屑消失，url路径修改(包含发送请求)

 1 removeClick(){
 2       // 传给服务器的字段不是必传的那种，如果属性值是空，还会传给服务器，若是undefined，则不会携带，优化接口性能
 3       this.searchParams.categoryName = undefined
 4       this.searchParams.category1Id = undefined
 5       this.searchParams.category2Id = undefined
 6       this.searchParams.category3Id = undefined
 7       this.getData()
 8       // 路由跳自己，用来更改url路径
 9       // 本意是删除query参数，但params参数有的话要携带params参数
10       if(this.$route.params){
11         this.$router.push({name:'search',params:this.$route.params})
12       } 
13     },

5.点击搜索选项的X  (删除params参数)

　　该面包屑消失，url路径修改(包含发送请求)，搜索框清空

 1 removeKeyword(){
 2       this.searchParams.keyword = undefined
 3       this.getData()
 4       // 通知兄弟组件，清楚搜索的关键字
 5       this.$bus.$emit('clearKeyword')
 6       // 进行路由跳转
 7       if(this.$route.query){// 清除关键词params参数，携带菜单选择query参数
 8         this.$router.push({name:'search',query:this.$route.query})
 9       }
10     }

　　搜索框清空要用到全局事件总线$bus,现在main.js里注册(beforeCreate)，然后在用$emit触发，在$on里执行回调,将搜索框用v-model绑定的值置空

标签：逻辑,47,route,searchParams,参数,location,query,params,面包屑
来源： https://www.cnblogs.com/alannero/p/15741466.html