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. hdu-4632 Palindrome subsequence （回文子序列计数）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4632 问题要求回答一串字符串中回文子序列的数量,例如acbca就有 a,c,b,c,a,cc,aa,a ...

  2. P4557 [JSOI2018]战争

    首先可以题目描述的两个点集是两个凸包,分别设为A和B. 考虑一个向量w不合法的条件. 即存在b+w=a,其中a属于A,b属于B. 也就是a-b=w. 即对b取反后和a的闵可夫斯基和. 求出闵可夫斯基和 ...

  3. SWUST OJ(954)

    单链表的链接 #include <stdio.h> #include <stdlib.h> typedef struct LinkNode //单链表节点结构的定义 { cha ...

  4. python记录_day11 闭包 迭代器

    一.第一类对象: 函数名是一个变量,可以当普通变量使用,但它又是一个特殊的变量,与括号配合可以执行函数. 函数名的运用 1.单独打印是一个内存地址 2.可以给其他变量赋值 3.可以作为容器类变量的元素 ...

  5. git merge和git rebase的区别

    git merge是用来合并两个分支的.# 将b分支合并到当前分支git merge b git cherry-pick可以选择某一个分支中的一个或几个commit(s)来进行操作.例如,假设我 们有 ...

  6. 十三、MVC的WEB框架（Structs2）

    一.Structs2的应用 Structs2是基于MVC的WEB框架.一般基于框架的程序要运行成功,对于JAR包的版本,配置文件的正确性有着苛刻的要求,一个地方错了,都会导致框架程序运行出错. 1.首 ...

  7. linux过滤旧文件中的空行和注释行剩余内容组成新文件

    一.说明 在某些场景下我们想要将旧文件中空行和注释行过滤掉,将产生实际效果的行保留. 比如redis提供的配置示例文件中有很多用于说明的空行和注释行,我们想把产生实际效果的配置行筛选出来组成新的简洁的 ...

  8. Linux服务列表（CentOS）

    1.service用法 service SCRIPT COMMAND [OPTIONS] #执行脚本中方法,最常用法 service --status-all #查看所有服务的运行状态 service ...

  9. spring boot整合shiro后，部分注解（Cache缓存、Transaction事务等）失效的问题

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/elonpage/article/details/78965176 前言 整合有缓存.事务的sprin ...

  10. x=x+1, x += 1, x++ 效率分析

    x = x + 1 效率最低 具体如下: 1. 读取右x的地址 2. x + 1 3. 读取左x的地址 4. 将右值传给左边的x(编译器不认为左x和右x是同一个地址) x += 1 其次 1. 读取右 ...