vue前台(三)采用申明式导航去点击连接到其他组件(采用事件委派方式)
一,使用声明式路由连接到search组件,使用组件对象(申明式路由),会让浏览器卡顿,可采用编程式路由
模板template
二, 每个连接路由使用编程式路由,效率还不是很高,因为每个类别都添加了相同的点击事件,多加了很多回调,浪费内存,可采用事件委派,给相同的父元素添加即可
<div class="all-sort-list2" @click="toSearch"> <div
v-for="(c1, index) in categoryList"
:key="c1.categoryId"
> <h3> <a href="javascript:;" :data-category1Id="c1.categoryId" :data-categoryName="c1.categoryName" >{{c1.categoryName}}</a> <!-- 为什么不适用声明式导航,因为一次性创建了多个组件对象影响效率,因此我们采用编程式导航去跳转 --> <!-- <router-link :to="{name:'search',query:{categoryName:c1.categoryName,category1Id:c1.categoryId}}">{{c1.categoryName}}</router-link> --> <!-- 使用了编程式导航,但是效率还不是很高,因为每个类别都添加了相同的点击事件,每个点击事件都有自己的回调函数 采用事件委派(事件委托,事件代理)来处理--> <!-- <a href="javascript:;" @click="$router.push({name:'search',query:{categoryName:c1.categoryName,category1Id:c1.categoryId}})">{{c1.categoryName}}</a> --> </h3> <div class="item-list clearfix"> <div class="subitem"> <dl class="fore" v-for="(c2, index) in c1.categoryChild" :key="c2.categoryId"> <dt> <!-- <router-link :to="{name:'search',query:{categoryName:c2.categoryName,category2Id:c2.categoryId}}">{{c2.categoryName}}</router-link> --> <!-- <a href="javascript:;" @click="$router.push({name:'search',query:{categoryName:c2.categoryName,category2Id:c2.categoryId}})">{{c2.categoryName}}</a> --> <a href="javascript:;" :data-category2Id="c2.categoryId" :data-categoryName="c2.categoryName" >{{c2.categoryName}}</a> </dt> <dd> <em v-for="(c3, index) in c2.categoryChild" :key="c3.categoryId"> <!-- <router-link :to="{name:'search',query:{categoryName:c3.categoryName,category3Id:c3.categoryId}}">{{c3.categoryName}}</router-link> --> <!-- <a href="javascript:;" @click="$router.push({name:'search',query:{categoryName:c3.categoryName,category3Id:c3.categoryId}})">{{c3.categoryName}}</a> --> <a href="javascript:;" :data-category3Id="c3.categoryId" :data-categoryName="c3.categoryName" >{{c3.categoryName}}</a> </em> </dd> </dl> </div> </div> </div> </div>
js部分
methods: {
//点击分类跳转到search
toSearch(event) {
let data = event.target.dataset; //拿到所有儿子元素身上所有的自定义属性组成的一个对象,属性是要小写
// console.log(data)
let { categoryname, category1id, category2id, category3id } = data;
if (categoryname) {
//点的一定是a标签,我们要点的
let location = {
name: "search"
};
let query = {};
query.categoryName = categoryname
if (category1id) {
query.category1Id = category1id
} else if (category2id) {
query.category2Id = category2id
} else {
query.category3Id = category3id
}
location.query = query
//点击三级分类的时候,我们也不能光关注query参数,也要去看看之前有没有params参数
//如果有,需要把之前的params参数也带上
let {params} = this.$route
if(params){
location.params = params
}
this.$router.push(location);
}
}
},
router.js路由对象部分
{
path:'/search/:keyword?',
component:Search,
name:'search',
// props: route => ({keyword:route.params.keyword,keyword1:route.query.keyword1})
},