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

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

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

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

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

代码重点如下图：

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

vue-router + ElementUI实现NavMenu 导航菜单 选中状态的切换的更多相关文章

  1. [vue ]滚动视图解决ElementUI NavMenu 导航菜单过长显示的问题

    记录一下工作 需求 导航菜单过长的时候会溢出,需要一个像 Tabs 标签页一样的滚动视图容器,可以左右滚动内部视图. 解决方法 由于时间问题,所以直接将 Tabs 源码抽取出来使用. 这里要做一些特殊 ...

  2. NavMenu 导航菜单

    顶栏 适用广泛的基础用法. 导航菜单默认为垂直模式,通过mode属性可以使导航菜单变更为水平模式.另外,在菜单中通过submenu组件可以生成二级菜单.Menu 还提供了background-colo ...

  3. jq 实现切换菜单选中状态

    点击导航菜单,切换选中状态 效果: 思路:首先获取选中的URL,再通过正则判断是否相同,相同就加上相应的属性,不相同就去除相应的属性. html代码 <div class="layui ...

  4. element-ui 框架中使用 NavMenu 导航菜单组件时，点击一个子菜单会出现多个子菜单同时展开或折叠？

    我在使用 elment-ui 框架的导航组件时,直接粘贴复制了官网上 (http://element-ui.cn/#/zh-CN/component/menu)的例子不会出错,但是当我将他们转化为动态 ...

  5. Iview 中 获取 Menu 导航菜单 选中的值

    期望效果: 原来,我用的是脚本来控制,然后........,再然后,我再去仔细看官方文档的时候,才发现,Menu组件 有那么两个事件,on-select 和 on-open-change ,好气啊,之 ...

  6. 2-5 【ngFor指令 事件的处理和样式绑定】顶部导航支持选中状态

    索引的获取 first和last是布尔类型的 奇数偶数 []方括号表示的是数据绑定 ()圆括号就是事件绑定 . 开始代码 我们要实现的功能是菜单点击后,就变色 这样我们就得到了索引. 新建一个clas ...

  7. 导航菜单点击图片切换--jquery

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. JQuery Mobile - 导航栏选中状态代码

    class="ui-btn-active" 参考: https://wizardforcel.gitbooks.io/w3school-jqmobile/content/8.htm ...

  9. 微信小程序——选中状态的切换

    加入购物车的时候,往往会有产品相关属性的选择,比如:尺寸,规格等.像我做的项目中,就有一个门店的选择,如下图: 我们如何做到当前点击的这个高亮呢?今天就讲一下如何实现这个功能. 思路: 1.定义一个高 ...

随机推荐

  1. java开学第一周测试自我感想

    开学第一周,王建民老师就对我们进行了java测试,对我们说测试题目是基于期末考试的基础难度来出的.我们的考试完全是靠暑假在家自学的基础,如果在家没有自学java,那完全就是看不懂试卷到底要考什么.由于 ...

  2. android------DDMS files not found: tools\hprof-conv.exe

    好久没有Eclipse了,使用一下就遇到坑,使用eclipse突然发生这个问题:DDMS files not found: ***\sdk\tools\hprof-conv.exe,无法连接模拟器 在 ...

  3. 6月16 ThinkPHP连接数据库及Model数据模型层--------查询及数据添加

    连接数据库配置及Model数据模型层 convertion.php config.php 1.在config.php做数据库连接配置 2.修改配置 /* 数据库设置 */ 'DB_TYPE' => ...

  4. 4月24 php基础及函数的应用

    PHP是一种被广泛认可应用,运行在服务端的脚本语言,PHP需要安转PHP应用程序服务器去解释执行,是用来协助Web服务器工作的编程语言,因此所写的任何代码只有在www文件下的才能实施预览.PHP是一种 ...

  5. 关于click的多次触发问题（冒泡事件）

    1. 问题描述: 在点击事件触发时调用接口,若用户多次点击会造成多次调用接口,有时会引起一些数据错误的问题,如支付页面,点击多次时会在后台生成多个相同订单 解决方法: (1)加flag,让点击事件只执 ...

  6. python-flask-请求源码流程

    启动先执行manage.py 中的    app.run() class Flask(_PackageBoundObject): def run(self, host=None, port=None, ...

  7. subline 自己使用的插件

    http://blog.csdn.net/jianhua0902/article/details/43761899 https://www.cnblogs.com/qingkong/p/5039527 ...

  8. PAT 1005 Spell It Right

    1005 Spell It Right (20 分)   Given a non-negative integer N, your task is to compute the sum of all ...

  9. [CodeForces - 614A] A - Link/Cut Tree

    A - Link/Cut Tree Programmer Rostislav got seriously interested in the Link/Cut Tree data structure, ...

  10. noip2014生活大爆炸版石头剪刀布

    题目描述 石头剪刀布是常见的猜拳游戏:石头胜剪刀,剪刀胜布,布胜石头.如果两个人出拳一 样,则不分胜负.在<生活大爆炸>第二季第8集中出现了一种石头剪刀布的升级版游戏. 升级版游戏在传统的 ...