<ul>
<li>
<router-link :to="{name: 'home'}" class="active_item" exact>首页</router-link>
</li>
<li><router-link :to="{name: 'healthList'}" class="active_item">健康证办理</router-link></li>
            </ul>

1.给导航添加class属性

2.在css中定义该class对应的router-link-active样式

  .active_item.router-link-active {
color: #358ee7;
}

tip:

“首页”默认总是选中状态。给其后边添加一个‘exact’属性即可解决

vue根据路由变换,切换导航栏样式的更多相关文章

  1. 用Vue来实现音乐播放器(五):路由配置+顶部导航栏组件开发

    路由配置 在router文件夹下的index.js中配置路由 import Vue from 'vue' import Router from 'vue-router'//配置路由前先引入组件impo ...

  2. 微信小程序------导航栏样式、tabBar导航栏

    一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { "pages":[ " ...

  3. 微信小程序入门四: 导航栏样式、tabBar导航栏

    实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { & ...

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

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

  5. Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式

    Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...

  6. React Navigation 导航栏样式调整+底部角标消息提示

    五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬! 这是坚持学习react-native的第二篇文章,可能会迟到,但是绝不会缺席,这篇要涉及到的是re ...

  7. React-Native 之 GD (二)自定义共用导航栏样式

    1.自定义导航栏样式 步骤一:从效果图中可以看出,导航栏的样式都差不多,因为我们前面已经设置了 Navigator ,这边的话我们还需要自定义 Navigator 的样式,可以看到所有的 Naviga ...

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

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

  9. vue+el-menu实现路由刷新和导航栏菜单状态保持(局部刷新页面)

    一.菜单项激活状态保持 有时,我们在项目中会有这样一个需求,即实现 一个侧导航栏,点击不同的菜单项,右边内容会跟着变化,而页面手动刷新后想要使菜单激活状态保持,那么这个功能该如何实现呢? 现在给出以下 ...

随机推荐

  1. 剖析ElasticSearch核心概念,NRT,索引,分片,副本等

    ElasticSearch 的核心概念 Near RealTime(NRT) 近实时 近实时有两种意思,一种是从写入数据到可以被搜索到有一个小延迟(大概一秒),还有一种就是基于ElasticSearc ...

  2. 电脑忘记WiFi密码了,但又想知道,该怎么办?

    如何查看电脑已经连过的WiFi的密码? 你有没有遇到这样的情况,电脑之前连过的WiFi,正好手机也想连此WiFi,但是忘记密码了,没有WiFi的手机怎么能叫手机呢?.下面我们来看看如何查看已连接过的W ...

  3. JS代码简单一段即可破解QQ空间删除说说

    代码如下: 简单的一段代码即可搞定啦!!是不是很简单! var delay = 1000; function del() { document.querySelector('.app_canvas_f ...

  4. 2018-2019-2 20165312《网络攻防技术》Exp1 PC平台逆向破解

    2018-2019-2 20165312<网络攻防技术>Exp1 PC平台逆向破解 一.Exp1.1 直接修改程序机器指令,改变程序执行流程 知识要求:Call指令,EIP寄存器,指令跳转 ...

  5. Linux下的快捷键

    1:tab 键 命令补全 路径补全 2:Ctrl+C    命令的中止 3:Ctrl+D     退出当前的会话  exit   logout 4:Ctrl+l      clear  清屏    5 ...

  6. 通过SQLServer的数据库邮件来发送邮件

    前段时间需要做一个发送邮件的功能,于是就花了一点时间研究了一下.发现通过SQLServer就可以发送邮件,只需要配置一下就可以了,而且配置过程很简单.下面来说一下配置过程: 1.启用Database ...

  7. Tensorflow数学运算

    一.Tensor 之间的运算规则 1) 相同大小 Tensor 之间的任何算术运算都会将运算应用到元素级 2) 不同大小 Tensor(要求dimension 0 必须相同) 之间的运算叫做广播(br ...

  8. react-native上手篇

    根据公司发展,后期可能要做APP开发,所以了解一下react-native.之前工作用过react,所以想想应该不会太难.(结果配置环境和demo就搞了一天!) 1,搭建环境 官网地址 1,Node( ...

  9. 如何在vs2015中编译并配置tesseract4.0

    1)安装相关软件: 下载ccpan,把路径放到path(右击电脑,选择“属性”,选择左边的“高级系统设置”,选择“环境变量”,找到“系统变量”里面的“path”,点击“编辑”,选择右边的“新建”,输入 ...

  10. java8 for ,forEach ,lambda forEach , strean forEach , parller stream forEach, Iterator性能对比

    java8 for ,forEach ,Iterator,lambda forEach ,lambda  strean forEach , lambda parller stream forEach性 ...