三级联动展示和获取数据跳转路由

先给三级联动最大的父元素 添加点击事件 通过事件委派 给所有子组件添加

给a标签添加自定义属性 通过用element接受 e.target 再 element.dataset 判断有没有自定义属性从而得知是不是a标签

<div class="sort" @click="goSearch">
                    <div class="all-sort-list2">
                        <div class="item" v-for="(item, index) in categoryList" :key="item.categoryId">
                            <h3 @mouseenter="changeIndex(index)" :class="{ cur: index == curChange }">
                                <!-- 给每个A标签绑定一个自定义属性 用来判断是不是a标签 -->
                                <a :data-categoryName="item.categoryName" :data-category1id="item.categoryId">{{
                                        item.categoryName
                                }}</a>
                            </h3>
                            <div class="item-list clearfix" :class="{ itemList: curChange == index }">
                                <div class="subitem" v-for="(sub, index) in item.categoryChild " :key="sub.categoryId">
                                    <dl class="fore">
                                        <dt>
                                            <a :data-categoryName="sub.categoryName"
                                                :data-category2id="sub.categoryId">{{ sub.categoryName }}</a>
                                        </dt>
                                        <dd>
                                            <em v-for="(list, index) in sub.categoryChild" :key="list.categoryId">
                                                <a :data-categoryName="list.categoryName"
                                                    :data-category3id="list.categoryId">{{ list.categoryName }}</a>
                                            </em>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>

 逻辑片段

用element接受e.target 然后通过element.dataset判断点击的标签有没有这个自定义属性 有得话就是a标签

从element.datase解析出来categoryname, category1id, category2id, category3id

let goSearch = (e) => {
    //通过e.target拿到事件元素得到所有子节点
    let element = e.target
    //element.dataset通过dataset拿到里面的所有自定义属性 有categoryname的就是a标签
    let { categoryname, category1id, category2id, category3id } = element.dataset
    if (categoryname) {
        //整理参数通过query传参
        let location = { categoryName: categoryname }
        if (category1id) {
            location.category1id = category1id
        } else if (category2id) {
            location.category2id = category2id
        } else {
            location.category3id = category3id
        }
        router.push({
            name: 'search',
            query: location
        })
    }
}