网站推广积分,精准营销的作用,做企业网站 排名,学院网站建设用户需求分析报告当我们页面中有许多a标签需要实现点击跳转到同一个页面并携带不同的参数时#xff0c;我们就可以使用事件委派自定义属性编程式导航 的方式#xff0c;用最小的内存实现路由跳转的最大效率。
为什么我们不用router-link 进行跳转#xff1f;
要知道#xff0c;我们页面中…当我们页面中有许多a标签需要实现点击跳转到同一个页面并携带不同的参数时我们就可以使用事件委派自定义属性编程式导航 的方式用最小的内存实现路由跳转的最大效率。
为什么我们不用router-link 进行跳转
要知道我们页面中的每一个router-link 都是Vue通过new一个组件给我们创建出来的当我们页面中有几百个router-link 标签时对于浏览器的内存压力是非常大的会造成卡顿。 一、事件委派
事件委派就是将多个元素共有的事件放到他们共同的父元素身上。
比如下面
我们有一个三级菜单的效果具体的结构不需要知道只需要知道点击a标签实现路由跳转即可
每一级的菜单都有若干个a标签点击这些标签就会跳转到共同的页面参数是点击的标签名和对应的id。
其实这样我们有多少个a标签就会有多少个回调函数还是挺占内存的。 所以我们把这个点击路由跳转的事件绑定到他们共同的父元素上就能只用一个回调函数并且给所有的元素添加点击路由跳转事件。 我们把事件提升到父元素的操作就叫做事件委派。 二、自定义属性
我们在上面使用了事件委派后改标签下的所有元素都拥有了该事件那我们接下来要做的就是判断我们点的到底是不是a标签只有我们点击了a标签才会实现路由跳转点击h3dtdiv啥的都不会跳转。
我们可以使用自定义属性来标识该标签是否为a标签。 :data-属性名 属性值 我们给每一级菜单都加上一个categoryName和categoryId属性
其值为就是我们要传参的菜单名和该标签的id号。
categoryName属性用来判断点击对象是否为a标签和传参categoryId用来传参。 三、编程式导航
我们既然已经定义了自定义属性那我们要拿到自定义属性进行判断 event.target.dataset.属性 注意我们在自定义属性的时候用的是驼峰命名法而转化为真实DOM后全部都变成了小写字母并且我们获取属性的属性不需要加上data- 我们就可以根据是否存在categoryName判断是否点击的是a标签如果是将categoryName和categoryId属性作为参数传递过去。
// 点击三级联动菜单跳转到search并携带参数名称和IDgoSearch(event) {let dataset event.target.dataset;// 如果点击的是目标元素就发送请求if (dataset.categoryname) {this.$router.push({name: search,query: {categoryName: dataset.categoryname,categoryId: dataset.categoryid}})}},
