Vue项目实战(五)：三级联动的路由跳转

1. 相关代码如下：

<template>
//components >>> typeNav >>> index.vue
....
    <!-- 利用事件委派+编程式导航实现路由跳转与传递参数 -->
    <div class="all-sort-list2" @click="goSearch">
        <div class="item" 
	         v-for="(c1, index) in categoryList" 
	         :key="c1.categoryId" 
	         :class="{cur: currentIndex == index}">
            <h3 @mouseenter="changeIndex(index)">
                <a :data-categoryName="c1.categoryName" 
                   :data-categoryId1="c1.categoryId">
                   {{ c1.categoryName }}
                </a>
            </h3>
            <div class="item-list clearfix" 
                :style="{display:currentIndex == index ? 'block': 'none'}">
                <div class="subitem" 
                 v-for="(c2, index) in c1.categoryChild" 
                 :key="c2.categoryId">
                    <dl class="fore">
                        <dt>
                         <a :data-categoryName="c2.categoryName" 
                         :data-categoryId2="c2.categoryId">
                         {{ c2.categoryName }}
                         </a>
                        </dt>
                        <dd>
                            <em v-for="(c3, index) in c2.categoryChild" 
                             :key="c3.categoryId">
                                <a :data-categoryName="c3.categoryName" 
                                :data-categoryId3="c3.categoryId">
                                {{ c3.categoryName }}
                                </a>
                            </em>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TypeNav',
    methods: {
       goSearch() {
            //分析：事件委派，是把全部的子节点(h3,dl,dt,em,a)的事件委派给父亲节点，
            //但是只有点击a标签的时候才会进行路由跳转
            //问题1:由上分析，怎么确定点击的一定是a标签
            //答：在子节点中的a标签上添加自定义属性data-categoryName，其余的子节点不存在此属性;
            //需要获取到当前触发这个事件的节点(h3,dl,dt,em,a)，
            //其中带有自定义属性data-categoryName的节点一定是a标签
            //节点有一个dataset属性，可以用来获取自定义属性与属性值
            //如果标签上有categoryname一定就是a标签
            //问题2:即使确定了点击的是a标签，如何区分一级、二级、三级分类的标签
            //答：在子节点中的a标签上添加自定义属性data-categoryId1,data-categoryId2,
            //data-categoryId3用以区分一级、二级、三级分类的标签
            let element = event.target
            let {categoryname,categoryid1,categoryid2,categoryid3} = element.dataset
            
            if(categoryname) {
                //整理路由跳转的参数
                let location = { name: 'search' }
                let query = { categoryName:categoryname }
                if(categoryid1) {
                    query.categoryId1 = categoryid1
                }else if(categoryid2) {
                    query.categoryId2 = categoryid2
                }else {
                    query.categoryId3 = categoryid3
                }
                //整理完参数
                location.query = query
                //路由跳转
                this.$router.push(location)
            }
        }
    }
}
</script>