47-面包屑的业务逻辑

2021-12-28 17:37:14 阅读：204 来源： 互联网

标签：逻辑 47 route searchParams 参数 location query params 面包屑

业务逻辑：

　　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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

47-面包屑的业务逻辑