vue-router + ElementUI实现NavMenu 导航菜单选中状态的切换

elemen-ui官方网站：http://element.eleme.io/#/zh-CN/component/menu新手小白利用vue+element-ui尝试搭建后台管理系统，效果是这样的，但是发现点击首页时，黄色选中状态不会切换到首页，最后发现可以利用$route.path设置默认选中的导航，而且el-menu-item中的index 就是当前路由的路径，...

denghut882925

3776人浏览 · 2018-01-02 16:56:00

denghut882925 · 2018-01-02 16:56:00 发布

elemen-ui官方网站：http://element.eleme.io/#/zh-CN/component/menu

新手小白利用vue+element-ui尝试搭建后台管理系统，

效果是这样的，但是发现点击首页时，黄色选中状态不会切换到首页，

最后发现可以利用$route.path设置默认选中的导航，

而且el-menu-item中的index 就是当前路由的路径，

代码重点如下图：

如此设置之后就可以实现导航和页面同时变化了。

转载于:https://www.cnblogs.com/ertingbo/p/8177972.html

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}$/, //不连续的两位字母// /^