采用申明式导航去点击连接到其他组件(采用事件委派方式)

Posted 2020-12-16 fsg6

模板template

每个连接路由使用编程式路由，效率还不是很高，因为每个类别都添加了相同的点击事件，多加了很多回调，浪费内存，可采用事件委派，给相同的父元素添加即可

<div class="all-sort-list2" @click="toSearch">
              <div

　　　　　　　　　　 v-for="(c1, index) in categoryList"

                :key="c1.categoryId"

　　　　　　　　　　>
              
              
                <h3>
                  <a
                    href="javascript:;"
                    :data-category1Id="c1.categoryId"
                    :data-categoryName="c1.categoryName"
                  >{{c1.categoryName}}</a>
                  <!-- 为什么不适用声明式导航，因为一次性创建了多个组件对象影响效率，因此我们采用编程式导航去跳转 -->
                  <!-- <router-link :to="{name:‘search‘,query:{categoryName:c1.categoryName,category1Id:c1.categoryId}}">{{c1.categoryName}}</router-link> -->
                  <!-- 使用了编程式导航，但是效率还不是很高，因为每个类别都添加了相同的点击事件，每个点击事件都有自己的回调函数
                  采用事件委派（事件委托，事件代理）来处理-->
                  <!-- <a href="javascript:;" @click="$router.push({name:‘search‘,query:{categoryName:c1.categoryName,category1Id:c1.categoryId}})">{{c1.categoryName}}</a> -->
                </h3>
                <div class="item-list clearfix">
                  <div class="subitem">
                    <dl class="fore" v-for="(c2, index) in c1.categoryChild" :key="c2.categoryId">
                      <dt>
                        <!-- <router-link :to="{name:‘search‘,query:{categoryName:c2.categoryName,category2Id:c2.categoryId}}">{{c2.categoryName}}</router-link> -->
                        <!-- <a href="javascript:;" @click="$router.push({name:‘search‘,query:{categoryName:c2.categoryName,category2Id:c2.categoryId}})">{{c2.categoryName}}</a> -->

                        <a
                          href="javascript:;"
                          :data-category2Id="c2.categoryId"
                          :data-categoryName="c2.categoryName"
                        >{{c2.categoryName}}</a>
                      </dt>
                      <dd>
                        <em v-for="(c3, index) in c2.categoryChild" :key="c3.categoryId">
                          <!-- <router-link :to="{name:‘search‘,query:{categoryName:c3.categoryName,category3Id:c3.categoryId}}">{{c3.categoryName}}</router-link> -->
                          <!-- <a href="javascript:;" @click="$router.push({name:‘search‘,query:{categoryName:c3.categoryName,category3Id:c3.categoryId}})">{{c3.categoryName}}</a> -->
                          <a
                            href="javascript:;"
                            :data-category3Id="c3.categoryId"
                            :data-categoryName="c3.categoryName"
                          >{{c3.categoryName}}</a>
                        </em>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>

 

js部分

 methods: {

    

    //点击分类跳转到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

        }

        this.$router.push(location);

      }

    }

  },

 

router.js路由对象部分

  {

    path:‘/search/:keyword?‘,

    component:Search,

    name:‘search‘,

    // props: route => ({keyword:route.params.keyword,keyword1:route.query.keyword1})

  },