Vue项目-三级联动的路由跳转与传参

三级联动组件的路由的跳转与传参

三级联动,用户可以点击的:一级分类、二级分类和三级分类
以商城项目为例,Home模块跳转到Search模块,以及会把用户选中的产品(产品名字、产品ID)在路由跳转的时候,进行传递。

路由跳转
声明式导航:router-link
编程式导航:push | replace

  • 声明式导航

  • router-link 来替换a标签跳转(不推荐)
    在这里插入图片描述

  • 但是当鼠标进入三级联动,上下滑动的时候,会出现卡顿现象
    原因:router-link是一个组件,当服务器的数据返回后,循环出很多router-link组件创建实例1000+,创建组件实例的时候,一瞬间创建很多组件很耗内存,因此出现卡顿现象。

  • 编程时导航(常使用)

  • 绑定点击事件
    在这里插入图片描述

  • 点击事件一个方法
    在这里插入图片描述

  • 点击确实能够实现跳转,而且没有卡顿的现象。

  • 但是这种方法也不是最好的
    原因是:因为每一个a标签都绑定了一个@click函数,因为这个三级联动,要循环,可能会有1000+次,所以相当于绑定1000+@click回调函数,那么1000个回调函数。

  • 事件委派+编程式导航(最佳方法)
    事件委派:把原来加给子元素身上的事件绑定在父元素身上,就是把时间委派给父元素。比如说,鼠标点击事件,本来页面上有很多的鼠标点击事件,需要一个个的去写实现函数,但是如果你把鼠标点击事件交给上司来完成,那么就是鼠标点击那里的时候,就相当于上司找对应的下属来完成此事件,而不像前面一个个的去找实现函数。

<ul id="ul1" >
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
如果给每个li添加点击事件:
var li=document.getElementsByTagName('li');
function A(){alert(li.innerHTML);
};
li.click=A;

但是事件委派有两个弊端:很耗费资源;如果后期动态添加li,不会拥有这个弹出事件。
事件委派+编程式导航 实现三级联动

  1. 利用事件的委派
    在三级联动的父元素的div绑定一个@click=“goSearch”
<!-- 利用事件委派和编程式导航实现路由跳转和传参-->
<div class="all-sort-list2" @click="goSearch">

methods这样写:

methods:{goSearch(){this.$router.push('/search');}
}

此时实现了跳转search的效果。
但是新问题:第一个问题:怎么知道点击的是a标签?因为三级联动父div里面有a,h3,dt,dl,是把全部子节点的事件委派给父亲节点。第二个问题:即使能确定点击的是a标签,如何区分点击的是一级、二级、三级的a标签?
event是事件对象,可以获取到当前触发事件的节点
解决方法: 把子节点当中a标签,加上自定义属性data-categoryName,其余的子节点是没有的;一级、二级、三级分类的a标签也通过添加自定义属性来判断:

<div class="all-sort-list2" @click="goSearch"><divclass="item"v-for="(c1, index) in categoryList":key="c1.categoryId"@mouseenter="changeIndex(index)":class="{ cur: currentIndex === index }"><h3><!-- 给a标签添加自定义属性 --><a:data-categoryName="c1.categoryName":data-category1Id="c1.categoryId">{{ c1.categoryName }}</a></h3><!-- 二三级分类 --><divclass="item-list clearfix":style="{display: currentIndex === index ? 'block' : 'none',}"><divclass="subitem"v-for="c2 in c1.categoryChild":key="c2.categoryId"><dl class="fore"><dt><a:data-categoryName="c2.categoryName":data-category2Id="c2.categoryId">{{ c2.categoryName }}</a></dt><dd><em v-for="c3 in c2.categoryChild" :key="c3.categoryId"><a:data-categoryName="c3.categoryName":data-category3Id="c3.categoryId">{{ c3.categoryName }}</a></em></dd></dl></div></div></div></div>
goSearch(event) {//event.target:获取到的是触发事件的元素(div、h3、a、em、dt、dl)let node = event.target;//给a标签添加自定义属性data-categoryName,全部的字标签当中只有a标签带有自定义属性,别的标签名字----dataset纯属扯淡let { categoryname, category1id, category2id, category3id } =node.dataset;//第二个问题解决了:点击的到底是不是a标签(只要这个标签身上带有categoryname)一定是a标签//当前这个if语句:一定是a标签才会进入if (categoryname) {//准备路由跳转的参数对象let loction = { name: "search" };  // 固定参数let query = { categoryName: categoryname };//一定是a标签:一级目录if (category1id) {query.category1Id = category1id;//一定是a标签:二级目录} else if (category2id) {query.category2Id = category2id;//一定是a标签:三级目录} else {query.category3Id = category3id;}//判断:如果路由跳转的时候,带有params参数,捎带脚传递过去if (this.$route.params) {// 添加动态参数loction.params = this.$route.params;//动态给location配置对象添加query属性loction.query = query; //路由跳转this.$router.push(loction);}}},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/51011.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

限量85000份!茅台文旅中秋套盒刷新酒类文创产品新高度

执笔 | 尼 奥 编辑 | 扬 灵 八月中秋来&#xff0c;暖心团圆到。 如今&#xff0c;中秋团圆佳节将至&#xff0c;又到了一年中温馨而富有诗意的传统节日。在亲朋好友团圆赏月之际&#xff0c;怎少得了举杯邀明月的一杯美酒&#xff1f; 值此&#xff0c;茅台文旅限量发售85000…

《黑神话.悟空》:一场跨越神话与现实的深度探索

《黑神话.悟空》&#xff1a;一场跨越神话与现实的深度探索 在国产游戏日益崛起的今天&#xff0c;《黑神话.悟空》以其独特的剧情、丰富的人物设定和深刻的主题&#xff0c;成为了无数玩家翘首以盼的国产3A大作。这款游戏不仅是一次对传统故事的创新演绎&#xff0c;更是一场对…

MySQL编译安装-麒麟V10 x86

环境信息 操作系统: Kylin Linux Advanced Server V10 (Sword) 架构&#xff1a;X86 MySQL版本&#xff1a;5.7.44 编译 安装必要的依赖库和编译工具 sudo yum groupinstall Development Toolssudo yum install cmake ncurses-devel openssl-devel boost-devel libtirpc li…

操作系统:内存管理策略

外部碎片 当应用程序启动时&#xff0c;由操作系统负责给该应用程序分配其内存空间&#xff0c;假设此时启动了三个应用程序&#xff0c;操作系统分别给其分配了100m&#xff0c;10m和50m的内存&#xff0c;内存情况如下图 此时如果程序B下线&#xff0c;程序A和程序C之间便会…

【css】伪元素实现图片个悬停文字聚焦效果

实现重点&#xff1a; 文字覆盖在图片上&#xff1a; 通过使用 position: absolute 将 .box 文字盒子定位在图片上方。父容器 .img-wrap 使用了 position: relative 确保子元素的绝对定位在父容器的边界内生效。 创建悬停效果&#xff1a; 通过使用 &::before 和 &::…

国富基金入股的关联性与奇瑞依赖症,大昌科技业务独立性引关注

《港湾商业观察》廖紫雯 日前&#xff0c;安徽大昌科技有限公司&#xff08;以下简称&#xff1a;大昌科技&#xff09;更新招股书并完成三轮问询&#xff0c;公司冲刺深交所创业板得到进一步进展。此前&#xff0c;2023年6月&#xff0c;大昌科技IPO获深交所受理&#xff0c;…

密码管理系统的自动化与集成:重塑安全与效率的双重飞跃

在数字化时代&#xff0c;密码作为保护个人信息、企业资产及敏感数据的第一道防线&#xff0c;其重要性不言而喻。然而&#xff0c;随着网络应用的激增和复杂性的提升&#xff0c;传统的密码管理方式——如使用简单密码、重复密码或依赖记忆——已难以满足现代安全需求&#xf…

【微信小程序】自定义组件 - 数据、方法和属性

1. data 数据 2. methods 方法 在小程序组件中&#xff0c;事件处理函数和自定义方法需要定义到 methods 节点中&#xff0c;示例代码如下&#xff1a; 3. properties 属性 在小程序组件中&#xff0c;properties 是组件的对外属性&#xff0c;用来接收外界传递到组件中的数…

华为nova2下无需root安装Metasploit

华为nova2下安装google play store失败 从http://www.apkmirror.com/中下载termux 通过数据线传到手机上并安装 进入termux后执行如下指令&#xff1a; pkg install curl curl -OL https://raw.githubusercontent.com/Hax4us/Metasploit_termux/master/metasploit.sh chmod x …

优化 WinForms 应用程序的 DataGridView 性能

DataGridView 控件的虚拟模式允许你管理大量数据而不必一次性加载所有数据。这种模式特别适合于需要显示大量数据但又希望保持良好性能的场景。以下是如何启用和使用虚拟模式的步骤&#xff1a; 启用虚拟模式&#xff1a; 在 DataGridView 的属性窗口中&#xff0c;将 VirtualM…

杰发科技AC7840——CAN通信简介(8)_通过波特率和时钟计算SEG_1/SEG_2/SJW/PRESC

通过公式计算 * 波特率和采样点计算公式&#xff1a;* tSeg1 (S_SEG_1 2); tSeg2 (S_SEG_2 1).* BandRate (SCR_CLK / (S_PRESC 1) / ((S_SEG_1 2) (S_SEG_2 1))), SCR_CLK 为CAN 模块源时钟* SamplePoint (tSeg1 / (tSeg1 tSeg2)). {0x0D, 0x04, 0x04, 0x3B},…

数据结构——链式队列和循环队列

目录 引言 队列的定义 队列的分类 1.单链表实现 2.数组实现 队列的功能 队列的声明 1.链式队列 2.循环队列 队列的功能实现 1.队列初始化 (1)链式队列 (2)循环队列 (3)复杂度分析 2.判断队列是否为空 (1)链式队列 (2)循环队列 (3)复杂度分析 3.判断队列是否…

26.删除有序数组中的重复项---力扣

题目链接&#xff1a; . - 力扣&#xff08;LeetCode&#xff09;. - 备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/remove-duplicates-from-sorted-array/descript…

仿Muduo库实现高并发服务器——Server.hpp框架的简单描述

EventLoop模块在本项目中的简单使用&#xff1a; 下面这张图 是channel模块&#xff0c;poller模块&#xff0c;TimerWheel模块&#xff0c;EventLoop模块&#xff0c;LoopThreadPool模块进行组合。便于大家对这个项目的理解&#xff0c;因为代码看起来挺复杂的。 下面这个图&…

招募活动投稿展示 | 感受科技温度,从一个 LLM 应用开始

活动介绍 谷歌开发者招募活动是专为 Google 技术的爱好者及开发者们开展的活动&#xff0c;旨在鼓励大家通过多种形式 (文章/视频/coding 等) 创作与 Google 技术相关的讲解分享、实践案例或活动感受等内容&#xff0c;展示代码、框架、平台在真实世界中的生动表现&#xff0c;…

详解Spring Bean的生命周期

详解Bean的生命周期 前言 在我们没有使用Spring框架之前&#xff0c;创建对象一般都是使用new关键字进行创建&#xff0c;当然除了new关键字外&#xff0c;还有 运用反射手段&#xff0c;使用Class类的newInstance方法 或者 Constructor类中的newInstance方法使用clone方法使…

找到sql里面参数字段占位符的位置,方便对字段进行加密存储

CCJSqlParserUtil工具是强大&#xff0c;难用也是真的&#xff0c;得分析sql的各种各样的表达式。从中递归找出业务需要的。 public class SqlExpressionAnalyzer {public static void main(String[] args) {String sql "select id,user_name from sys_user t1,sys_offi…

JavaScript语法基础之DOM基础

目录 1. DOM 基础 1.1. DOM 是什么&#xff1f; 1.1.1. DOM 对象 1.1.2. DOM 结构 1.2. 节点类型 1.3. 获取元素 1.3.1. getElementById() 1.3.2. getElementsByTagName() 1.3.3. getElementsByClassName() 1.3.4. getElementsByName() 1.4.如何去操作对象 修改属性…

Jenkins 定时触发策略

每天晚上 11 点执行一次&#xff0c;可以按照以下步骤进行。 复制代码 import jenkins import datetime import base64USERNAME bUFNXssaaX0NU\n PASSWORD bUFNXXssdds0Ndclass JenkinsMonitor:def __init__(self, jobs_to_monitor):self.jenkins_url "http://pe-dddd…

fastJSON工具类

1 总结 1&#xff1a; JSONObject&#xff1a; 理解为 Map 2&#xff1a;JSONArray &#xff1a; 理解为List<Map> 3&#xff1a;JSON.toJSONString()&#xff1b;会将时间转为时间戳 4&#xff1a;toJSONStringWithDateFormat 同一个字符串中 时间格式是统一格式 2 转成…