【Vue常见问题】三级联动的路由跳转和传递参数

最新推荐文章于 2024-05-16 23:45:48 发布

脱脂五花肉

最新推荐文章于 2024-05-16 23:45:48 发布

阅读量420

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/XIANTAO_CHENG/article/details/125227356

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

事件委派+编程式导航实现

第一步：利用事件委派

在三级联动的父元素中绑定一个点击事件

例如：发送消息有两种方式，分别是和，其中方式当数据量过大时，由于大小也有限，所以当处理不及时时，会造成先传的数据被覆盖，进而导致数据丢失。

第二步：确定点击的是a标签

因为绑定@click的div组件下有h3、a等标签，需要确定点击的是a标签，所以给a标签都带上data-categoryName属性，并定义不同的属性值

例如：新建一个对象，并将读取到的数据存入，然后换成。

第三步：确定是一级、二级或三级标签

需要分别给各级a标签加上自定义属性，分别为data-category1Id，data-category2Id，data-category3Id作为一级、二级或三级标签的标识

在这里插入图片描述

第四步：配置点击的具体事件

在methods中做以下配置

goSearch(event){
	//获取到触发这个事件的节点(绑定@click下的全部节点)
    let element = event.target;
    let {categoryname,category1id,category2id,category3id} = element.dataset;

    let location = {name: "search"};
    let query = {categoryName: categoryname};
    if (category1id) {
        query.category1Id = category1id;
    }else if (category2id) {
        query.category2Id = category2id;
    }else {
        query.category3Id = category3id;
    }
    location.query = query;
    //路由跳转
    this.$router.push(location);
    //this.$router.push({name:"search",query:{categoryName:'xxx',category1Id:'xx'}})
},