el-menu刷新页面时，当前激活菜单的高亮问题

Posted 2023-05-17

参考技术A

在el-menu组件里有这样一个属性， default-active 用来表示当前激活菜单的 index
1、如果给 default-active 设置一个默认值，那么刷新页面时，会出现一个问题，即 路由地址和菜单对应的index是不一致的 。

如上图所示，当前页面应该是数据分析，路由地址是/analyse，但是刷新页面之后，菜单栏却变成了首页，这是因为default-active默认值设置的是‘/’

2、此时只需要绑定动态属性default-active，利用watch来监听路由变化，并赋值给default-active
绑定属性

使用watch监听路由变化

element-plus中导航高亮不自动刷新问题

解决使用element-plus el-submenu时页面被this.$router.push(“xxx”)跳转后，导航菜单高亮不能自动刷新问题，需要注意以下几点：

1. 在el-menu加上router
2. index必须绑定路由的path,参考上面的例子，'/'不能少
3. default-active设为当前路由（this.$route.path）,这样在路由变化的时候，对应的menu-item才会高亮，如：
   
   提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：[e-mail]联系笔者删除。
   笔者：苦海