<el-menu :default-active="$route.path" class="el-menu-vertical-demo" background-color="#31506F" text-color="#fff" active-text-color="#FFA800"  router :unique-opened="uniqueopened">

重要的是绑定:default-active="$route.path",然后再将index值变成自己的路由地址。

    <el-menu-item index="/main/task">
<i class="el-icon-circle-check"></i>
站点管理
</el-menu-item>

这样导航栏就自动随路由地址高亮啦~~

但是如果你有子路由,那进入子路由旁边的导航栏是不会亮的,因为index值还是你父路由的地址,所以我们需要改变index值或者把$route.path匹配的路径变成父路由的地址,我选择第二种,这样我们就需要路由钩子了!

首先将:default-active="$route.path"变成:default-active="activeindex"绑定一个变量activeindex

<script>
export default{
data(){
return{
uniqueopened:true,
activeIndex:'/main/system' //默认激活路由地址
}
},
methods:{
defaultIdex(){
this.activeIndex = this.$route.path;
}
},
created(){ //vue生命周期创建时
this.defaultIdex()
},
beforeUpdate(){
this.activeIndex = this.$route.matched[2].path //重要的点,this.$route.matched[2].path 就是父路由的地址,使用的是路由钩子。
},
update(){ //vue生命周期改变时
this.defaultIdex()
},
}
</script>

我的理解也是很浅薄,愿有好办法的博友可以告知。三扣~Thanks♪(・ω・)ノ

vue-router+elelment-ui,实现导航栏激活高亮的更多相关文章

  1. Vue页面手动刷新,导航栏激活项还原到初始状态问题解决方案

    场景描述:在页面中存在顶部导航和左侧导航,左侧导航和右侧内容区使用了命名视图实现,点击左侧导航的链接时,右侧内容区相应显示不同组件内容.问题:在当前链接手动刷新浏览器(例如:浏览器地址为/enterp ...

  2. Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

  3. Vue 如何实现一个底部导航栏组件

    参考网址: https://www.jianshu.com/p/088936b7b1bd/ Vue 如何实现一个底部导航栏组件 可以看到父组件是知道我点击了底部TabBar的哪个item的. 实现 实 ...

  4. 我的Vue之旅、05 导航栏、登录、注册 (Mobile)

    第一期 · 使用 Vue 3.1 + TypeScript + Router + Tailwind.css 构建手机底部导航栏.仿B站的登录.注册页面. 代码仓库 alicepolice/Vue-05 ...

  5. 6 vue-element.ui 左侧导航栏

    <template> <div> <el-menu :default-active="'/'+activeIndex2" mode="ver ...

  6. iOS7 UI兼容 导航栏按钮边框 UINavigationItem left and right padding

    iOS7之前的UI为: 而在iOS7中,由于设计方面的原因,使得UI变为: 修改的方法重写UINavigationItem的setLeftBarButtonItem和setRightBarButton ...

  7. element ui 左侧导航栏

    <el-menu class="left-menu" :default-active="$route.name" :unique-opened=" ...

  8. 记一次Vue跨导航栏问题解决方案

    简述 这篇文章是我项目中,遇到的一个issue,我将解决过程和方法记录下来. 本篇文章基于Vue.js进行的前端页面构建,由于仅涉及前端,将不做数据来源及其他部分的叙述.使用的CSS框架是 Boots ...

  9. vue Router——进阶篇

    vue Router--基础篇 1.导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的 ...

随机推荐

  1. C#中,子类构造函数调用父类父类构造函数的正确方式

    正确调用的方式是:

  2. 注册测绘师20180301-CNSS

    GNSS:Global Navigation Satellite System(全球卫星导航系统)GPS:Global Positioning System(全球定位系统)GPS是美国的卫星导航系统. ...

  3. JSP动作标签flush属性值

    在JSP动作标签<jsp:include flush="true"/>,flush属性可以为true或false.flush默认值为false,当把flush属性赋值为 ...

  4. python -- 字符串 for循环

    1.基本数据类型概况        1.int  整数  ==>主要用来做数学计算      2.str  字符串  ==> 可以保存少量数据并进行相应的操作.           (字符 ...

  5. es6,es7,es8

    概述 ES全称ECMAScript,ECMAScript是ECMA制定的标准化脚本语言.目前JavaScript使用的ECMAScript版本为ECMAScript-262. ECMAScript 标 ...

  6. 像调试java一样来调试Redis lua

    高并发的系统中,redis的使用是非常频繁的,而lua脚本则更是锦上添花.因为lua脚本本身执行的时候是一个事务性的操作,不会掺杂其他外部的命令,所以很多关键的系统节点都会用redis+lua来实现一 ...

  7. DbArithmeticExpression 参数必须具有数值通用类型问题的解决

    C#中LINQ to Entities进行日期比较,使用-运算符,比如: list.FirstOrDefault(s =>(DateTime.Now - s.Updated).TotalHour ...

  8. 阿里云Oss对象存储

    将文件保存到阿里云上. 1.添加对象存储OSS空间 (新建Bucket) 可以在阿里云后台对象存储里面添加,也可以通过api添加.添加之后设置权限. skd使用. 1安装 Aliyun.OSS.SDK ...

  9. jjava:将jar包引入环境变量的一个骚操作以及因此搞出来的扑街问题

    现在我有一个java文件,我只想javac启动,但是这货import了一堆jar里面的东西. 于是我下回了所有的jar包,将这些jar包丢到jdk1.8.0_162\jre\lib\ext里面就ok了 ...

  10. fwrite文件写入数据

    文件的操作就两种:读和写 读:把文件中的内容读入到程序中,然后根据自己的项目需求把文件的数据进行相关的处理. 写:就是将程序中的数据,写入到文件中,去更新文件. 这么两种操作归到代码中就是这两种函数: ...