如上图所示，标签很多，因此可以利用事件委派来优化，也就是给父标签添加click监听，利用自定义属性data-*为每个标签设置自定义属性，具体代码如下
<template><div class="type-nav"><div class="container"><div @mouseleave="yinIt" @mouseenter="showIt"><h2 class="all">全部商品分类</h2><transition name="sort"><div class="sort" v-show="showItem"><!-- 此处添加click监听 --><div class="all-sort-list2" @click="toSearch"><divclass="item"v-for="(c1, index) in categoryList":key="c1.categoryId"><h3:class="{ c: current === index }"@mouseenter="current = index;moveInItem(index);"><!-- <a href="javascript:;" @click="pushdata({categoryName:c1.categoryName,category1Id:c1.categoryId})">{{c1.categoryName }}</a> --><!-- 一级标签，动态添加两个自定义属性:data-categoryName和:data-category1Id --><ahref="javascript:;":data-categoryName="c1.categoryName":data-category1Id="c1.categoryId">{{c1.categoryName }}</a></h3><div class="item-list clearfix"><div class="subitem"><dlclass="fore"v-for="c2 in c1.categoryChild":key="c2.categoryId"><dt><!-- <a href="javascript:;" @click="pushdata({categoryName:c2.categoryName,category2Id:c2.categoryId})">{{c2.categoryName }}</a> --><!-- 二级标签，动态添加两个自定义属性:data-categoryName和:data-category2Id --><ahref="javascript:;":data-categoryName="c2.categoryName":data-category2Id="c2.categoryId">{{c2.categoryName }}</a></dt><dd><em v-for="c3 in c2.categoryChild" :key="c3.categoryId"><!-- <a href="javascript:;" @click="pushdata({categoryName:c3.categoryName,category3Id:c3.categoryId})">{{c3.categoryName }}</a> --><!-- 三级标签，动态添加两个自定义属性:data-categoryName和:data-category3Id --><ahref="javascript:;":data-categoryName="c3.categoryName":data-category3Id="c3.categoryId">{{c3.categoryName }}</a></em></dd></dl></div></div></div></div></div></transition></div><nav class="nav"><a href="###">服装城</a><a href="###">美妆馆</a><a href="###">尚品汇超市</a><a href="###">全球购</a><a href="###">闪购</a><a href="###">团购</a><a href="###">有趣</a><a href="###">秒杀</a></nav></div></div></template><script>import {mapState } from "vuex";import throttle from "lodash/throttle";export default {name: "TypeNav",//事件委托toSearch(event) {// let query={categoryName}// category1Id?query.category1Id=category1Id:""// category2Id?query.category2Id=category2Id:""// category3Id?query.category3Id=category3Id:""// this.$router.push({// name:'Search',// query// })// console.log(event.target.dataset);let location={name:'Search'}const {msg}=this.$route.paramsmsg?location.params={msg}:""// 自定义属性会被收集到dataset中,格式变为小写const {categoryname, category1id, category2id, category3id } =event.target.dataset;// 收集query参数let query = {categoryName: categoryname };category1id ? (query.category1Id = category1id) : "";category2id ? (query.category2Id = category2id) : "";category3id ? (query.category3Id = category3id) : "";location.query=query//路由跳转if(this.$route.path!=='/'){this.$router.replace(location);}else{this.$router.push(location);}},//拿到vuex中三级分类数据computed: {...mapState({categoryList: (state) => state.home.baseCategoryList,}),},};</script>
以上代码利用父节点click监听传递event，利用event.target.dataset收集自定义属性，从而从自定义属性中拿到对应的分类名和分类id，然后作为query参数传递。
