三级标签列表实现路由跳转

梦的遇见OvO

于 2022-04-25 19:25:38 发布

阅读量538

点赞数 1

分类专栏：项目文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_48115183/article/details/124412195

版权

本文介绍如何在电商网站中处理三级标签的路由跳转问题，避免使用router-link带来的性能消耗。通过编程式导航和事件委托，利用Vue.js的数据绑定和事件处理，为各级菜单的a标签添加自定义属性data-XXX，以此实现点击时的路由跳转。详细阐述了在组件中定义goSearch函数来处理路由变化的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做电商网站时会经常遇到这种三级标签,如果使用router-link跳转那会给每个标签都加上,非常耗性能,所以一般都是使用编程式导航和事件委托来完成路由跳转,我们可以给每个a标签打上自定义属性data-XXX,然后一级菜单和二级菜单还有三级菜单各打上鸽子的自定义属性data-xxx123

<div class="all-sort-list2" @click="goSearch" @mouseleave="leaveIndex">
<div class="item" v-for="(c1,index) in categoryList" v-show="index!==16" :key="c1.categoryId" :class="{cur:currentIndex===index}">
<h3 @mouseenter="changeIndex(index)" >
<a :data-categoryName="c1.categoryName" :data-category1Id="c1.categoryId" >{ {c1.categoryName}}</a>
</h3>
<div class="item-list clearfix" :style="{display:currentIndex=&