其他分享
首页 > 其他分享> > 47-面包屑的业务逻辑

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