完成三级联动的路由跳转与传递参数业务

最新推荐文章于 2024-02-22 01:48:08 发布
最新推荐文章于 2024-02-22 01:48:08 发布
阅读量216 收藏
点赞数
分类专栏： vue.js 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42526440/article/details/124532409
版权

三级联动如下图所示：
给a标签添加自定义属性data-categoryName，保证这个节点带data-categoryName，一定是a标签
可以通过节点的dataset属性获取相应节点的自定义属性，返回的是一个对象KV【自定义属性相关的】
在这里插入图片描述

如果带有categoryname字段的一定是a标签
在这里插入图片描述
在这里插入图片描述
解构赋值:

let { categoryname, category1id, category2id, category3id } =
        nodeElement.dataset;

在这里插入图片描述
两个对象如下图所示:
在这里插入图片描述
整理完参数为如下形式:
在这里插入图片描述

G018_star sky♬
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
三级标签列表实现路由跳转
weixin_48115183的博客
04-25 438
做电商网站时会经常遇到这种三级标签,如果使用router-link跳转那会给每个标签都加上,非常耗性能,所以一般都是使用编程式导航和事件委托来完成路由跳转,我们可以给每个a标签打上自定义属性data-XXX,然后一级菜单和二级菜单还有三级菜单各打上鸽子的自定义属性data-xxx123 <div class="all-sort-list2" @click="goSearch" @mouseleave="leaveIndex"> <div class="ite...
Vue 中的Vue Router一级路由，二级路由，三级路由以及跳转
weixin_33804582的博客
06-18 7226
今天编写了一下Vue中的路由 先用命令行新建一个空的项目，并且我知道要用路由，就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vscode打开、引入demo5的文件夹，在vscode自带的命令行中安装依赖和启动 cnpm install cnpm run dev 之后成功启动在8080端口 要想显示导航，限...
vue-router 三级路由，路由跳转页面异常白屏或404，或刷新三级路由页面后一级和二级路由菜单丢失
tangdou369098655的博客
02-22 717
某些时候是因为二级和三级的路由共用router-view，可以使用router-view 和 redirect 解决问题。欢迎大家指出文章需要改正之处~
vue3配置router路由并实现页面跳转
Gemini仔仔的专栏
04-23 8734
但是history也是有缺点的，不怕前进后退跳转，就怕刷新（如果后端没有准备的话），因为刷新是实实在在地去请求服务器了。ps：引入文件时记得新建view文件夹以及里面的A、B.vue两个页面。与之对应的，通过点击链接实现导航的方式，叫做声明式导航。通过调用 API 实现导航的方式，叫做编程式导航。2.1文件中引入vue方法、配置页面具体路径。vue-router 中的编程式导航 API。1. 普通网页中点击。// 第二种跳转方法。
Vue2（十三）：路由的使用及注意点、嵌套路由、路由的query和params参数、props配置
weixin_42044763的博客
09-01 2084
vue-rooter：是vue的一个插件库，专门用来实现SPA应用1、路由就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。2、key 为路径, value 可能是 function 或 component组件3、vue 的一个插件库（vue-router），专门用来实现 SPA 应用。
前端项目-03-三级联动和路由跳转和传参
ycmy2017的博客
03-31 373
商城，前端，vue
aa.rar_三级联动_跳转_跳转PHP
09-20
三级联动跳转菜单,实现三级联动功能，简洁明了
HTML城市三级联动与区域编码.zip
01-08
HTML城市三级联动与区域编码，三级下拉框配合js,可完成三级地区输入与获取区域编码
三级联动省市区数据库SQL
07-19
中国省/市/县三级联动MySQL数据.内含所有省市区的地区编码和地区名，里面为sql文件直接运行即可。
省市区三级联动.html
11-04
适合有jquery基础的同志
jQuery城市三级联动菜单特效
07-24
jQuery城市三级联动菜单特效是一款jQuery基于json实现的省市区三级联动城市选择实例特效。
Vue项目的常见报错问题解决
qq_42526440的博客
04-16 8659
1、‘webpack-dev-server’ 不是内部或外部命令，也不是可运行的程序 或批处理文件 解决办法： 现在使用webpack要同时安装webpack-cli这个包，才可以调用webpack和webpack-dev-server这些命令。 cnpm install webpack webpack-dev-server webpack-cli --save-dev 2、"export 'default' (imported as 'ol') was not found in 'ol' （黄色警告，但
Vue中props传递参数（父传子）
qq_42526440的博客
03-23 3255
父组件要正向地向子组件传递数据或参数，子组件收到后，根据传递过来的数据不同，渲染不同的页面内容，或者执行操作。 这个正向传递数据的过程是通过props来实现的。子组件使用props来声明需要从父组件接受的数据。 注意的： 在js中对象和数组是引用类型，指向同一个内存空间，所以props是对象和数组时，在子组件内改变是会影响父组件的。 父组件中 <template> <div> <HelloWorld :message1="messageToHelloW
vue兄弟组件传值的两种方式
qq_42526440的博客
02-09 3101
本demo主要是为了演示vue项目中兄弟组件之间的传值，这里我演示了两种方式： a. bus总线传值； b. 我自己一般把它当成常规的传值(其实也就是子组件A传父组件，父组件再传子组 件B) 下边开始本次demo的编写： 一. bus总线传值的使用： 在项目中创建一个单独的eventBus.js文件 该js文件的内容很简单，就是暴露一个vue实例而已。 有人喜欢在main.js全局引入该js文件，我一般在需要使用到组件中引入。 创建相关组件： 父组件中注册并使用子组件： 分别在子组件one和two中
VUE中$refs和$el的使用详解
qq_42526440的博客
04-17 2377
ref: 给元素或者子组件注册引用信息 ref有三种用法： 1.ref加在普通元素上，获取用this.$ref.xxx可以获取到dom元素。 <div ref="system">测试</div> // 获取 mounted() { console.log(this.$refs.system); } 2.ref加在子组件上，用this.$ref.xxx可以获取到组件实例，可以使用子组件的所有方法。 使用： // this.$ref.xxx.方法名() // 父组件 <co
前端存储主要有哪些方式，有什么区别（sessionStorage,localStorage,cookie）
qq_42526440的博客
03-17 2343
前端在处理页面数据的时候有时候会存放一些数据在浏览器当中，一般存储在浏览器当中的缓存数据安全性比较低。 主要的存储方式如下图： 1.localStorage 1.存储时间是永久存储。 2.大小在5M左右。 3.ie低版本或者一些使用无痕浏览器都是不支持的 4.存储的是字符串，内容过多时，会消耗内存空间，让页面变卡 5.本地存储，不会和服务器有交互 代码： // 使用方法存储数据 localStorage.setItem("name", "Srtian") // 使用属性存储数据 localStorage.
vue中的:key是什么，有什么用?
qq_42526440的博客
03-19 2025
vue中的:key是什么，有什么用? 因为不理解 ：key（v-bind:key），网上查了一些的资料，这篇写得非常不错，很简洁清楚。 其实不只是vue，react中在执行列表渲染时也会要求给每个组件添加上key这个属性。 要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。 我们知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。 vue和react的虚拟DOM的Diff算法大致相同，其核心是
bootstrap 三级联动
最新发布
02-28
Bootstrap三级联动是一种常用的前端技术，用于实现多级下拉菜单的联动效果。它通常用于省市区选择、分类选择等场景。 实现Bootstrap三级联动的基本步骤如下： 1. 引入Bootstrap框架：首先需要在页面中引入Bootstrap...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值