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. P2469 [SDOI2010]星际竞速

    在何Au的讲解下终于搞明白了这个以前的坑. 首先考虑最小路径覆盖. 这个题意又要求我们求出的最大流为n-1(这样才能保证路径为1条) 考虑高速航行模式的图怎么建,只需要保证最大流的同时费用最小即可,显 ...

  2. Search中的剪枝-奇偶剪枝

    设有一矩阵如下: 0 1 0 1 0 1 1 0 1 0 1 0 0 1 0 1 0 1 1 0 1 0 1 0 0 1 0 1 0 1 从为 0 的格子走一步,必然走向为 1 的格子 .//只能走四 ...

  3. 3.numpy_array数组

    官方文档:www.numpy.org.cn Numpy 数组及其索引 先导入numpy: from numpy import * 产生数组 从列表产生数组: lst = [0, 1, 2, 3] a ...

  4. 378. Kth Smallest Element in a Sorted Matrix（java，优先队列）

    题目: Given a n x n matrix where each of the rows and columns are sorted in ascending order, find the ...

  5. Loadrunner打不开浏览器以及卡死的各种问题

    Loadrunner11.0启动WebTours之总结1 第一次安装LR11时,安装安组件后没有对电脑进行重启,直接安装的LR112 安装完毕LR后,录制脚本时发现不能启动IE11.百度发现LR支持I ...

  6. Matlab-10:Ritz-Galerkin方法求解二阶常微分方程

    一.代数多项式法: tic; clear clc % N=input('please key in the value of ''N'''); N=10; M=100; h=1/M; X=0:h:1; ...

  7. 【实战问题】【1】@PostConstruct 服务启动后加载两次的问题

    @PostConstruct:在服务启动时触发操作(我是用来更新微信的access_token) 解决方法: tomcat文件夹→conf→server.xml→将appBase="weba ...

  8. python-flask-SQLAlchemy-Utils组件

    SQLAlchemy-Utils,提供choice功能 定义: # pip3 install sqlalchemy-utils from sqlalchemy_utils import ChoiceT ...

  9. 2017-5-19&5-23/系统性能指标

    1. 系统性能指标包括哪些? 业务指标.资源指标.中间件指标.数据库指标.前端指标.稳定性指标.批量处理指标.可扩展性指标.可靠性指标. 1)业务指标:主要包括并发用户数.响应时间.处理能力. 指标 ...

  10. [已解决]Can't update: no tracked branch

    报错:Can't update: no tracked branch 我们之前的分支是drome,然后删除了这个分支,换到了另一个分支上面去了,所以出现了这个问题. 解决办法: 0:点击VCS-> ...