在使用element-ui el-submenu时页面被this.$router.push(“xxx“)跳转后，导航菜单标签未变化

已于 2023-09-01 11:09:06 修改
阅读量839 收藏 1
点赞数 1
文章标签： vue.js 前端 javascript
于 2023-06-05 16:36:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_38493460/article/details/131051167
版权
在Vue应用中，为使el-menu组件在路由变化时能自动高亮当前选中的菜单项，需将routerindex绑定到路由的path，并确保default-active设置为this.$route.path。这样，当路由切换时，对应的menu-item会正确地显示高亮状态。
摘要由CSDN通过智能技术生成

在这里插入图片描述

解决方案如下：

  1. 在el-menu加上router
  2. index必须绑定路由的path,参考上面的例子，'/'不能少
  3. default-active设为当前路由（this.$route.path）,这样在路由变化的时候，对应的menu-item才会高亮
六六的小帅
关注
【Vue】实战项目：电商后台管理系统（Element-UI）（一）前后端搭建 - 登录界面 - 主页界面
YK菌的博客
03-11 1万+
文章目录0. 项目介绍电商管理系统（Element-UI）前端技术栈后端技术栈1. 配置前端项目① 安装 Vue 脚手架② 通过 Vue 脚手架创建项目③ 配置 Vue 路由④ 配置 Element-UI 组件库⑤ 配置 axios 库⑥ 初始化 git 远程仓库⑦ 将本地项目托管到 Github 或 码云 中2. 配置后端接口① 安装 MySQL 数据库② 安装 Node.js 环境③ 配置项目相关信息④ 启动项目⑤ 使用 Postman 测试后台项目接口是否正常3. 登录/退出功能3.1 登录业务流程3
vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019
PGguoqi的博客
04-19 8977
未完
今天使用router.push解决了一个问题，开心
莫笑忘的博客
09-18 2029
问题是这样的：在路由跳转时，需要传递参数，之前不了解vue中的路由，当然，现在也一样，但中秋时就不同了。 我就贴出代码吧，传递参数代码如下： this.$router.push({ name: 'PicQuery', params: { searchFaceInfo: item ...
vue中this.$router.push()跳转导致页面刷新导航栏active不改变问题解决~！
qq_45332221的博客
07-13 5537
前言 写vue项目中遇到了导航栏绑定的active不改变，路由正常跳转了结果导航栏显示还是第一个。 于是我就开始排错，发现每次路由跳转，导航栏绑定的activeNum都被刷新掉归0了，也就是显示第一个。刚开始确实好久没发现问题，以前也是这么写的没出过问题。 转机 后来我想是不是因为，这个导航栏是在router-view跳转的子组件中的原因，页面跳转的时候将整个子组件都刷新了，表面上看是子组件中的子组件刷新（相当于孙子级别的组件刷新），其实跳转的时候是刷新的整个子组件。 解决 然后我就在子组件的导航栏中cre
vue-router + el-menu
qq_40202869的博客
09-12 652
这时候需要自己在点击子菜单的时候进行导航，在。添加方法，里边有三个参数。
通过this.$router.push跳转到tabbar页时，tabbar选中状态不改变的问题
XUELUO123456789的博客
05-18 1401
1.场景 问题：在弄移动端练习时，遇到其他非tabbar页跳转到tabbar页时，tabbar底部导航栏选中状态不匹配的现象。但当页面进行F5刷新时，匹配正常 问题所在：因为通过$router.push访问，页面没有进行刷新 解决方法： 1.可通过App.vue设置整体页面刷新， 2.如果使用传统的location.reload()和$router.go(0)会导致页面一闪一闪的，甚至是多次不断地强制刷新，用户体验不好，问题也不少，故选择provide/inject在app.vue中设置整体刷新 二.方
Vue路由this.route.push跳转页面不刷新
CoderYin的博客
04-29 2万+
Vue路由this.route.push跳转页面不刷新 一、背景 介绍：在vue项目开发中，使用路由进行页面跳转时，路由所跳转的页面不进行刷新。也就是vue生命周期函数没有执行(created、mounted钩子函数)。 案例： A页面： B页面： 问题： 当在A页面第一点击按钮到B页面时，一切正常，当返回到A页面再次点击按钮时，B页...
element-ui页面$router.push(“xxx“)跳转后，导航菜单高亮 和 el-menu 传值
LJJONESEED的博客
09-18 1158
<el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect"> data() { return { activeIndex: 0 } }, methods: { handleSelect(index) { this.activeIndex = index; } }, watch: { $route() { thi
Vue路由this.$router.push跳转页面不刷新
Marray000的博客
11-01 5411
在vue项目开发中，使用路由进行页面跳转时，路由所跳转的页面不进行刷新。也就是vue生命周期函数没有执行(created、mounted钩子函数)。
vue--SPA项目开发之首页导航+左侧菜单
chen的博客
09-30 2148
1. Mock.js 前后端分离开发开发过程当中，经常会遇到以下几个尴尬的场景： 老大，接口文档还没输出，我的好多活干不下去啊！ 后端小哥，接口写好了没，我要测试啊！ 前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点 Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。 众所周知Mo...
SPA 项目开发 之 首页导航&左侧菜单
qq_44641053的博客
08-10 2285
SPA 项目开发 之 首页导航&左侧菜单SPA 项目开发 之 首页导航&左侧菜单Mock.js登陆与注册页面的跳转HBuild 主要代码components 目录Routerviews 目录效果展示 SPA 项目开发 之 首页导航&左侧菜单 需要实现的功能： 1、mock.js模拟响应ajax请求 2、通过js代码完成路由的跳转 3、后台主界面的搭建 4、退...
elementUI , Vue关于路由的权限控制及实现
张大晴的博客
12-27 2746
前提： 后台管理平台，左树菜单（后台接口返回）。前端负责写路由的对应关系（根据用户角色动态生成路由） 我并没有写的登录页面，我只是写了一个简单的菜单页及菜单内容（仅仅是为了重点介绍左树菜单的生成和动态路由的生成） 正文： 第一趴： 左树菜单生成： 思路（后台返回菜单结构），前端直接用elementUI树组件显示即可（当然左树菜单的权限也是后台控制什么用户回显什么菜单） 后台返回的菜单...
vue 在一个页面跳转到另外一个页面，选中的导航没有变解决方案
小巧r的博客
02-10 3980
效果：即在配置页面跳到管理页后，没有选中管理，还是跳转前的选中状态 解决思路： 1.定位：路由和默认选中菜单的监听问题 2.方案：去菜单组件中，通过监听路由变化，改变选中值 具体代码实现： <el-aside :class="navBarWidth"> <el-menu @select="handleSelect" :default-active="defaultActive" class="el-menu-vertical-d
Vue中this.$router.push（参数） 实现页面跳转
热门推荐
吴冬雪的博客
05-22 13万+
由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。很多情况下，我们在执行点击按钮跳转页面之前还会执行一系列方法，这时可以使用。页面通过path/name和query传递参数，该实例中row为某行表格数据。及通过路由配置的name属性访问。来修改 url，完成跳转。
elementUI的NavMenu 导航菜单跳转其他页面,保持当前选中状态
weixin_42947972的博客
12-16 1774
elementUI的NavMenu 导航菜单跳转其他页面,保持当前选中状态
Vue页面跳转但是导航高亮不会改变
weixin_44689277的博客
03-14 2490
问题： 在页面上点击时，高亮会变但是在后天用代码的话就不会变。 this.$router.push({ name: "write" }); 用这段代码高亮不会改变。 原因： 因为没有改变导航栏的 default-active （当前激活菜单的 index）。因为你用代码进行了改变，但是没有改变default-active的值。所以高亮不会改变。 解决： 每次变换路径时，进行刷新default-active。用监听器监听。 定义一个数据 定义函数handleSelect .
element-ui导航菜单跳转页面后，菜单选中项不对
qianduanVIP666的博客
08-03 1097
2.el-menu-item 标签 index绑定值=菜单跳转路由（index="/user"）1. el-menu 标签添加属性 :default-active="$route.path"1. 菜单跳转后，页面菜单的选中项与实际不符。2. 当前页面刷新后，菜单选中项与实际不符。
解决从登录页通过this.$router.push跳转首页后 点返回健路由变而页面不变的问题
lianwenxiu的博客
09-05 7722
做H5项目的时候遇到一个问题，我从 login 登录页通过 this.$router.push（{ name: 'home' }）路由登录成功后跳转到首页，但在ios系统下，会有一个默认返回条，点击返回键出现以下情况，路由显示的是回到登录页，而页面却还是首页。 解决思路： 开始我试着把push改为replace，但是发现并没什么卵用，还是会出现问题，所以只好用路由导航守卫去监听。 在首页加入...
ElemenUI 使用router.push()跳转，menu菜单选项与当前页不一致
Yuval的博客
11-04 3102
在使用ElementUI时，使用到了 el-menu 编写菜单组件时发现，由router.push()跳转到另外一个组件，Menu的状态不会更新。导致状态不同步。查阅了官方网站，发现有对应的方法解决。 default-active 当前激活菜单的 index 使用配置default-active指向当前路由的path，就可以解决。 因为组件也是使用element中的router配置的，所以选项的i...
element-ui 的 el-menu 菜单实现点击 el-submenu 也可以跳转页面
最新发布
09-24
Element UI 的 `el-menu` 组件本身提供了一个简单的导航结构，但默认情况下，当点击 `el-submenu`，它会展开子菜单而不是直接跳转到另一个页面。如果你想要实现点击 `el-submenu` 后跳转页面，你需要自定义一些逻辑...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值