1路由跳转问题 以及传参问题
利用相应的生命式路由(router-link) 会出现卡顿的现象 它是一个组件 页面一进入 会加载很多组件 会影响性能
改用编程式路由
解决方式 : 编程式路由 + 事件委派
利用事件委派存在一些问题 1:点击一定是a标签 2 如何获取参数[1,2,3,级分类的产品的名字 id]
把子节点当中a标签 加上那个自定义属性data-categoryName 其余是没有的
html结构
<div class="sort">
<div class="all-sort-list2" @click="goSearch">
<div class="item" v-for="(c1,index) in categoryList" :key="c1.categoryId" :class="{cur:actionIndex==index}">
<h3 @mouseenter="changeIndex(index)" @mouseleave="leaveIndex()">
<a :data-categoryName="c1.categoryName" :data-category1Id="c1.categoryName">{{c1.categoryName}}</a>
<!-- <router-link to="/search">{{c1.categoryName}}</router-link> -->
</h3>
<div class="item-list clearfix">
<div class="subitem" v-for="(c2,index) in c1.categoryChild" :key="c2.categoryId">
<dl class="fore">
<dt>
<a :data-categoryName="c2.categoryName" :data-category2Id="c2.categoryName">{{c2.categoryName}}</a>
<!-- <router-link to="/search">{{c2.categoryName}}</router-link> -->
</dt>
<dd>
<em v-for="(c3,index) in c2.categoryChild" :key="c3.categoryId">
<a :data-categoryName="c3.categoryName" :data-category3Id="c3.categoryName">{{c3.categoryName}}</a>
<!-- <router-link to="/search">{{c3.categoryName}}</router-link> -->
</em>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
相应的解决方法
methods:{
//鼠标进入修改响应式数据 actionIndex属性
// changeIndex(index){
// //index 鼠标移入某个一个标题上的下标
// // console.log(index);
// this.actionIndex = index
// },
//节流写法 throttle回调函数别用箭头函数
changeIndex:_.throttle(function(index){
this.actionIndex = index
},50),
//一级分类鼠标移除的事件回调 移除后类名消失
leaveIndex(){
this.actionIndex = -1
},
//进行路由跳转的方法
goSearch(){
this.$router.push('/search')
//解决方式 : 编程式路由 + 事件委派
//利用事件委派存在一些问题 1:点击一定是a标签 2 如何获取参数[1,2,3,级分类的产品的名字 id]
//把子节点当中a标签 加上那个自定义属性data-categoryName 其余是没有的
let element = event.target;
//节点有一个属性dataset 可以获取自定义属性与属性值
let {categoryname,category1id,category2id,category3id,} = element.dataset;
if(categoryname){
let location = {name:'search'};
let query = {categoryName:categoryname}
// alert(123)
//一级分类 二级分类 的a标签
if(category1id){
query.category1Id = category1id
}else if(category2id){
query.category2Id = category2id
}else{
query.category3Id = category3id
}
//整理完参数 路由跳转
location.query = query;
//路由跳转
this.$router.push(location)
}
}
}
节流问题的出现
编程式路由会出现频繁触发事件 利用相应的节流方法可以解决
引入lodash
import _ from 'lodash';
原先获取标题下标的方法
changeIndex(index){
// //index 鼠标移入某个一个标题上的下标
// // console.log(index);
this.actionIndex = index
},
节流方法
changeIndex:_.throttle(function(index){
this.actionIndex = index
},50),
节流与防抖的总结
//防抖 用户操作很频繁 但是只执行一次
//节流 用户操作很频繁 但是吧频繁的操作变成为少量的操作【可以给浏览器充裕的时间解析代码】