解决elementUI菜单在vue中切换路由不高亮的问题

场景：项目中需要用到webscoket 推送过来的信息点击信息按钮跳转到指定的页面路由改变了可是菜单还是上一次的菜单高亮elementUI 里面有个属性通过设置这两个属性实现激活菜单的颜色active-text-color当前激活菜单的文字颜色（仅支持 hex 格式）string—#409EFF text-color...

树沙&

12993人浏览 · 2019-01-29 16:05:59

树沙& · 2019-01-29 16:05:59 发布

场景：项目中需要用到webscoket 推送过来的信息点击信息按钮跳转到指定的页面路由改变了可是菜单还是上一次的菜单高亮

elementUI 里面有个属性

通过设置这两个属性实现激活菜单的颜色

active-text-color

当前激活菜单的文字颜色（仅支持 hex 格式）

string

—

#409EFF

text-color

菜单的文字颜色（仅支持 hex 格式）

string

—

#303133

$route.path当前的路由我这边的index是字符串表示路由

然后通过elementUI提供的方法

select

菜单激活回调

index: 选中菜单项的 index, indexPath: 选中菜单项的 index path

在data上面定义一个中间变量activeIndex

监听路由的变化

这样就大功告成不管你页面怎么使用this.$router.push({path:'/xxx'}) 菜单都会跟随激活

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^