如何点击二级菜单切换地址并且转到相应的页面

最新推荐文章于 2024-07-04 14:11:39 发布

mini74

最新推荐文章于 2024-07-04 14:11:39 发布

阅读量1.2k

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/mini74/article/details/105584975

版权

本文介绍如何在Vue中实现二级菜单点击时切换地址并跳转到相应页面。通过绑定点击事件，传递地址参数给函数，存储在sessionStorage中，初始化数据，以及在每次点击后更新地址。

摘要由CSDN通过智能技术生成

给二级菜单绑定点击事件，并且将地址的参数传送给函数

 <el-menu-item :index="'/' + subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="SaveNavState('/' + subItem.path)"></el-menu-item>

在方法中定义这个函数，并且将传过来的地址保存在sessionStorage中

// 保存链接的激活状态
    SaveNavState (activePath)

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

mini74

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue二级菜单导航点击选中事件的方法

12-29

因为没有使用vue做一个真正完整的项目，所以乘着这个项目比较闲的时间，对标项目用vue做一些页面，丰富自己的项目经验。所以接下来基本都是一些简单的功能。目标：一级导航点击收缩展开，二级导航点击选中源码主要是思路，具体的就不放了 <ul class=sidebar-menu> <li class=treeNav v-for=(item,index)> <a>{{item.name}}</a

vue2点击菜单跳转对应页面(路由应用)

k912120的博客

08-10

4560

vue2点击菜单跳转对应页面(路由应用)

参与评论您还未登录，请先登录后发表或查看评论

【Vue3】el-menu的踩坑和使用

热门推荐

well2049的博客

05-16

2万+

虽然，jQuery已经非常好用了，但是实际的开发项目中，还是有很多限制，比如项目组奇葩的要求，不能使用任何插件，当然，也是考虑插件占用资源，毕竟100+KB对与小型项目来说还是非常大的。我最近就遇到做个点击展开二级菜单的要求，当然只能用原生的JS去写来实现，我借鉴了网上的一个案例，补充一下，分享一下：如果，默认打开页面进来时二级菜单是隐藏的，需要点击才能展现二级菜单，再点击就是隐藏二级菜单。这

elementui 导航菜单跳转二级页面

qq_57305148的博客

03-12

546

跳转页面 二级菜单如果折叠就看一下:default-active的值。

django权限之二级菜单

JZ5203的博客

11-15

264

遗漏知识点 1.构建表结构时,谁被关联谁就是主表,在层级删除的时候,删除子表的时候,主表不会被删除,反之删除主表的话,字表也会被删除, 使用related_name=None 反向查询,起名用的之前使用表名小写+__set.all() 使用related_name=None就直接使用别名.all()不再使用表名小写+__set方法了 2.如果项目使用多个数据库的话...

js实现二级菜单点击显示当前内容效果

10-18

为了实现这个效果，我们可以监听一级菜单的点击事件，然后根据点击的`<li>`元素的类名来切换二级菜单的内容。 JavaScript代码可能如下： ```javascript document.querySelectorAll('.li_list').forEach(function...

jquery实现二级菜单向上漂亮的图片背景切换效果

06-05

此外，为了在二级菜单展开时同步切换背景图片，我们需要在 jQuery 代码中添加相应的事件监听。例如，当一级菜单项被点击时，切换背景图片： ```javascript $(document).ready(function() { $('.nav > li').on('...

左侧二级菜单右侧对应切换内容tab

05-27

在IT行业中，"左侧二级菜单右侧对应切换内容tab"是一种常见的网页设计模式，它提高了用户在网站或应用中的导航体验。这种设计通常用于有多个相关内容模块的页面，使得用户能够轻松地在不同的部分之间切换，而无需...

解决element-ui中下拉菜单子选项click事件不触发的问题

10-18

今天小编就为大家分享一篇解决element-ui中下拉菜单子选项click事件不触发的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

NavMenu导航菜单el-submenu点击事件及激活状态变化

adminguojieBin的博客

09-23

1万+

多级菜单时一级菜单添加点击事件以及导航栏当前激活状态变化

el-menu显示点击的某项显示的indexPath不对

qq_40626218的博客

03-24

1140

问题描述：点击el-menu某一项后，我想实现这样一个效果：实现方式如下：显示路径是在父组件，左侧侧边栏是一个子组件。在 select 函数中（也就是选中某一项触发该函数），我通过$emit调用父组件中的函数，将indexPath传给父组件，然后父组件进行显示。但是出现了一个问题：当再点击某个目录时，路径就会发生变化：这就很神奇了，我明明只有在选中的时候才会触发父组件中的函数，给父组件中的indexPath赋值，而且点中某个目录的时候，也没有触发select函数，我...

Vue实战开发--后台管理系统Vue+Element ui（9）

weixin_48878440的博客

06-11

3632

这节课完成面包屑和tag的布局，并且与左侧菜单联系，涉及组件间通信。首先我们先完成每个页面的路由，之前已经有home页面和user页面，缺少mail页面和其它选项下的page1和page2页面。在view文件夹下新建mail文件夹，新建index.vue，填充user页面的内容即可。在view下新建other文件夹，新建pageOne.vue和pageTwo.vue，页面内容简单填充即可。三个页面都要更改name属性，后面会用到，首字母大写。示例：配置路由：在路由主文件添加路由，路由位置在CommonAs

vue + element 开发项目浅总结

weixin_42574985的博客

11-07

1088

1.在使用el-aside el-menu侧边栏进行路由跳转的时候，多页面最好用一个公共的侧边栏，使用route.push跳转，如果不使用路由跳转而是直接在el-menu-item的index里进行路由名的跳转，会导致切换页面的时候反复create页面，如果是在一个后台页面里获取到ticket，有可能会导致ticket赋值为空。小白第一次做的东西，先根据代码进行浅浅的一波总结，后面想着再根据浏览器的历史记录搜的一些问题再总结一下。其实最主要的大问题还在于图片的上传，详情页的图片替换，视频的上传等。

vue 简单二级联动选择 select二级节点选择

Ypromise-的博客

08-05

3186

本文用的是element-ui 的 select选择组件，简单写一个地区选择，其他用法也相同，适用于已经知道枚举值的 // templete 里 <el-form-item label="区域" prop="projectDivision"> <el-select v-model="ruleForm.projectDivision" pl

elementUI的Menu组件高亮问题并保存所选高亮

qq_44906497的博客

09-21

1042

3. 在created中赋值。1. 在vuex中存储。2. 提交给vuex。

解决element-ui下拉菜单无法给item注册点击事件的问题

m0_67750137的博客

01-07

279

解决element-ui下拉菜单无法给item注册点击事件

JavaScript+CSS创建可折叠二级菜单教程

"JavaScript+CSS实现的可...用户可以通过点击一级菜单项来展开或折叠相应的二级菜单，提高了网站导航的便捷性。这样的功能在现代网页设计中非常常见，尤其对于有多个层级的大型网站，能够有效地组织内容并节省空间。