前台项目27事件委托+编程式导航实现路由的跳转和携带参数

最新推荐文章于 2024-06-04 21:41:16 发布
最新推荐文章于 2024-06-04 21:41:16 发布
阅读量162 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liu12333322/article/details/126105988
版权

1.给一级、二级、三级分类标签共同的父元素添加点击事情，利用冒泡冒上来

在这里插入图片描述

2.给a标签添加自定义属性，确保有此属性的就是a标签

在这里插入图片描述

3.在vue里如何判断所点击的是否是a标签

通过a标签上的自定义属性来判断
3.1先获取事件点击对象event.target
3.2event.target上面存在一个dataset属性可以看到节点的自定义属性
3.3利用结构赋值，获取这个属性
3.4判断，有这个属性就是a标签，没有就不是
在这里插入图片描述

4.判断是一级、二级、三级分类标签

也是通过自定义标签的方法
自定义标签的key值可以判断是哪一级的标签，value值可以作为路由跳转时携带的参数
在这里插入图片描述

5.在vue里如何判断所点击的是哪一级标签，并携带路由参数

5.1获取一级、二级、三级分类标签
在这里插入图片描述
5.2整理路由跳转的参数
5.3不同分级下，动态决定路由携带的参数
在这里插入图片描述

小桐学前端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
编程式导航+事件的委派
weixin_68006893的博客
06-26 160
编程式导航+事件的委派
使用JavaScript做网页定位导航特效（上）
WJM_Aunt
09-16 1128
网页定位导航特效（上）一、特效分析左侧是内容，右侧是悬浮的导航菜单，左侧滚动时，右侧内容不改变位置；点击右侧链接，左侧定位到相应栏目，左侧滚动到相应栏目，右侧定位到对应链接。重难点： 左侧栏目和右侧导航菜单的显示样式实现 导航与滚动条之间的定位关联 二、特效设计技术点： 锚点（anchor）—网页制作中超链接的一种，页面内的超级链接 关于滚动条定位的事件和方法 1、onscroll：当用户滚动指定的
事件委托-tab切换
程序猿007的博客
06-19 1259
HTML结构代码： 首页 关于 我的 联系 div1 div2 div3 div4 CSS样式代码： *{ margin: 0;padding: 0; } ul li{ list-style: none; float: left; padding: 10px 45px; ba
vue事件传递参数
souwer的博客
05-06 3237
vue事件传递参数
vue 事件调用 传参_Vue 事件如何传递参数？
weixin_35679869的博客
02-22 3462
Vue 事件如何传递参数？事件函数参数传递：普通参数和事件对象传递格式如下：调用函数传参 点秋香vue事件绑定-参数传递实例如下：vue事件绑定-参数传递 xinbiancheng.cn{{ num }} 直接绑定函数名称 点秋香 调用函数传参 点秋香 /*vue事件绑定-参数传递1、如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数2、如果事件绑定函数调用，那么事件对象必须...
1 项目总结（编程项目+ 实验室项目）
Austrialia的博客
07-22 2229
谷粒学院在线教育 简介 项目经历主要包括一个关于Java后端开发的在线教育项目。该项目主要分为前台系统和后台系统，前台系统实现了数据显示、课程列表显示、课程支付等功能，后台系统主要实现了课程管理、教师管理、权限管理、用户登录注册、短信模块、视频存储等模块。项目采用前后端分离开发，后端主要采用springboot+springcloud微服务架构，基于JWT+token+cookie实现单点登录，使用springsecurity进行权限管理，Spring Cloud实现请求转发、功能模块微服务化、服务调用、请
vue+element导航+标签导航+路由跳转+路由转换.zip
05-21
vue+element导航+标签导航+路由跳转+路由转换，有需要可以取，博客有详尽说明，https://blog.csdn.net/Hei_lovely_cat/article/details/104692047
vue2+el-menu实现路由跳转及当前项的设置方法实例
08-28
主要介绍了vue2+el-menu实现路由跳转及当前项的设置,方法实例代码详解，非常不错，具有参考借鉴价值，需要的朋友可以参考下
vue2.0项目实现路由跳转的方法详解
08-27
主要介绍了vue2.0项目实现路由跳转的详细方法,非常不错，具有一定的参考借鉴借鉴价值，需要的朋友可以参考下
vue-router命名路由和编程式路由传参讲解
10-17
今天小编就为大家分享一篇关于vue-router命名路由和编程式路由传参讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
vue中使用事件代理并且获取一些参数
weixin_49210760的博客
04-05 1079
<template> <div @click="log($event)"> <ul> <li v-for="(item, index) in list" :key="index" :data-val="item.value"> {{ item.label }} </li> </ul> </div> </template> <script&gt
编程式路由导航
m0_46681545的博客
12-31 1585
快速上手编程式路由导航
探索Web前端三大主流框架：React，Angular和Vue.js
Kimi2024的博客
06-01 777
其中，React，Angular和Vue.js是最受欢迎的三大主流前端框架，它们分别由Facebook，Google和前Google工程师尤雨溪（Evan You）创建。总的来说，React，Angular和Vue.js各有其独特的优势和特点，选择哪个框架取决于项目的具体需求和开发团队的偏好。不过，无论选择哪个框架，都可以确信，你将站在一个坚实的基础之上，构建出高性能，响应式的Web应用。Angular是一个由Google维护的开源Web应用框架，它提供了一个完整且丰富的功能集，用于构建跨平台的应用。
vue-router 源码分析——2. router-link 组件是如何实现导航的
最新发布
miyagiSimple的博客
06-04 743
vue-router中 router-link 组件是如何实现导航的。recolve返回的对象里面的内容主要为location, route , href。location是标准化后的to，并且打上了标记表示已标准化，防止多次标准化，提升效率。route是通过遍历pathList和pathMap，利用正则表达式找到的和to匹配的路由对象，里面包含很多需要的内容。href在默认的hash模式下，会在to的前面加上#号，例如这里的’#/foo’。
vue3 vue-draggable-next 实现拖拽穿梭框效果
游九尘的博客
06-01 416
【代码】vue3 vue-draggable-next 实现拖拽穿梭框效果。
基于Springboot + vue实现的火锅店管理系统
qq_38470315的博客
06-03 86
主营内容：SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。文末获取源码。
vue-标签选择
zw899004的专栏
06-01 737
vue-标签选择
Vue中如何获取dom元素？
zhang20040217的博客
06-04 245
在Vue中，通常我们不直接操作DOM元素，因为Vue是一个声明式渲染的框架，它鼓励我们使用数据驱动视图的方式来更新UI。然而，在某些情况下，你可能需要直接访问DOM元素。在这种情况下，你可以使用Vue的。只在组件渲染完成后被填充，并且它是非响应式的。它仅仅作为一个直接访问子组件或DOM元素的逃生舱口。你应该避免在模板或计算属性中使用。获取了对应的DOM元素，并调用了它的。方法会被调用，输入框会获得焦点。在这个方法中，我们通过。然后，在Vue实例的。对象中，我们定义了一个。在这个例子中，我们在。
vue-router如何实现路由跳转,并且携带参数
04-02
在Vue中使用vue-router实现路由跳转并携带参数，可以通过以下步骤实现： 1. 在路由配置文件中定义路由路径和组件 ```javascript import VueRouter from 'vue-router' import Home from './components/Home.vue' ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值