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. canvas学习之粒子动画

    项目地址:http://pan.baidu.com/s/1ccTptc 粒子动画意思就是把一个图片粒子画,然后使用粒子作出动画效果,主要两个问题:一个图片如何粒子化,这里面我们使用canvas的get ...

  2. Confluence 6 删除一个空间

    删除一个空间将会完全删除空间和空间的所有内容,包括有关这个空间的所有日历,和链接到这个空间中的问题.只有具有空间管理员权限的用户才能够完全删除一个空间.  删除空间是完全从系统中删除的.一旦你删除了一 ...

  3. stark组件base.html

    stark 组件基础页面base.html 文件 base.html 1. base.html 页面是 : stark组件增,删,改,查页面的公共部分,如头部导航栏,左侧的用户权限列表栏等. 2. b ...

  4. DedecmsV5.7本地上传缩略图无法自动添加水印的解决方法

    问题:dedecms后台 系统->图片水印设置 图片水印设置有开启了,但是本地上传缩略图无法自动添加水印 网上有很多资料,所以记录一下 1.打开dede(实际项目后台文件夹)/archives_ ...

  5. UI基础七：给普通其他界面的PRODUCT 添加标准的搜索帮助

    在使用的组件中添加组件对象 Outbound Plug中添加外向连接:OP_PRODUCT METHOD op_product. DATA: lv_title TYPE string, lr_cont ...

  6. Python面向对象编程-类的封装，继承、多态

    面向对象是一种程序设计思想,对象作为程序基本单元,包含了数据和操作数据的函数. 面向对象的三大特点--数据封装.多态和继承. #类的创建,class关键字,类名大写,object表示从哪个类继承而来, ...

  7. Docker的简单介绍及使用

    Docker介绍 Docker是Docker.Inc公司开源的一个基于LXC技术之上构建的Container容器引擎,源代码托管在GitHub上,基于Go语言并遵从Apache2.0协议开源. Doc ...

  8. bool类型为什么可以当做int

    实际上bool型变量占用了一个字节的内存,当值为false的时候,实际存储的是0x00,为true时实际存储的是0x01,因此可以作为int整型使用 bool型只分0与非0,0为false,其余的包括 ...

  9. 微信小程序页面无法跳转

    推荐网址:https://www.jianshu.com/p/e56b55334585 1.无法跳转原因分析 要跳转的路径在app.js里未注册过或路径写错   要跳转的路径是否位于TabBar中 页 ...

  10. JAVA工程师面试常见问题集锦

    集锦一: 一.面试题基础总结 1. JVM结构原理.GC工作机制详解 答:具体参照:JVM结构.GC工作机制详解     ,说到GC,记住两点:1.GC是负责回收所有无任何引用对象的内存空间. 注意: ...