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. JS中循环逻辑和判断逻辑的使用实例

    源代码见: https://github.com/Embrace830/JSExample &&和||的理解 a || b:如果a是true,那么b不管是true还是false,都返回 ...

  2. 【洛谷p1031】均分纸牌

    [博客园的第一条随笔,值得纪念一下] 均分纸牌[传送门] 洛谷上的算法标签是 这道题是一道贪心题,过了四遍才过(蒟蒻有点废) 第一遍的时候考虑的非常少,只想到了求出平均数→求差值→从左往右加差值: 这 ...

  3. 先天性肾上腺增生症（ACH）

    先天性肾上腺增生症 类型 症状 并发症 治疗 情感支持 产前筛查 预防 什么是先天性肾上腺皮质增生症? 先天性肾上腺增生症(CAH)是一组影响肾上腺的遗传性疾病.肾上腺产生激素皮质醇和醛固酮.CAH是 ...

  4. 【其他】【Restful】【1】简单了解Restful概念

    内容: REST是一种设计风格,不是一种标准,是一种思想.符合REST原则的架构方式即可称为RESTful. 在Restful之前的操作:http://127.0.0.1/user/query/1 G ...

  5. Android之Activity生命周期详解

    Activity的生命周期方法: onCreate()--->onStart()--->onResume()--->onPause()--->onStop()--->on ...

  6. 【LeetCode】N数和

    1. 3Sum 给定一个无序数组(可能存在重复元素),是否存在三个数之和为0,输出所有不重复的三元组. e.g. 给定数组 [-1, 0, 1, 2, -1, -4], 结果集为:[ [-1, 0, ...

  7. .NET面试基本问题

    1..NET和C#的区别? .NET:一般指的是.NET FrameWork框架,是平台,技术. C#:是一编程语言,是基本.NET平台. 2.C#的委托是什么?事件是不是委托? 委托可以把一个方法作 ...

  8. PHP函数总结(个人版)

    ($saying[$key][, , 'utf-8'); 1.//mb_substr() string mb_substr ( string $str , int $start [, int $len ...

  9. 主流Linux发行版简介

    发行版 包格式 所属厂商 发布年份 最新版本 说明 RHEL RPM RedHat 2004 7.3 RedHat Linux9.0后的企业方向,系统可以免费下载安装但无法使用官方yum源 Fedor ...

  10. UNIX发展史简介

    1965年贝尔实验室(Bell Labs).通用电气(General Electric)和麻省理工学院(MIT)欲共同打造MULTICS(Multiplexed Information and Com ...