<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. 用yum快速搭建LAMP平台

    实验环境: [root@nmserver-7 html]# cat /etc/redhat-release CentOS Linux release 7.5.1804 (Core) [root@nms ...

  2. js 合并多行表格

    最近在整理之前的工作记录,有很多信息是借鉴他人,亲测有效的,遗憾的是当初记录时没有留下来源,如侵权请联系fourOfour@163.com. 1.autoRowSpan函数的第一个参数是table的i ...

  3. YUV介绍

    YUV444与YUV422下采样. 一.YUV介绍 YUV有三个分量:Y(Luminance/Luma:亮度).U和V表示色差,体现的是图片的色彩信息.相对于RGB彩色空间,将亮度信息和色彩信息分离. ...

  4. Java子类访问父类的私有成员变量

    /**子类会继承父类所有的属性和方法. * 但是根据不同的权限标识符,子类不可见父类的私有变量,但可以通过父类的公共方法访问私有变量 * 所以对于重名变量,子类和父类都各有一份. * 对于子类和父类中 ...

  5. 自己的mongodb的CRUD封装

    工具类:package Utils; import com.google.common.collect.Lists; import com.mongodb.MongoClient; import co ...

  6. Android中的透明度

    最近在实践中,在一个设置了背景图的LinearLayout中放一个透明度15%,背景色为#ffffff的容器,里面再放白色#ffffff的文本,开始容器用background="#fffff ...

  7. leetcode《按递增顺序显示卡牌》

    题目描述: 牌组中的每张卡牌都对应有一个唯一的整数.你可以按你想要的顺序对这套卡片进行排序. 最初,这些卡牌在牌组里是正面朝下的(即,未显示状态). 现在,重复执行以下步骤,直到显示所有卡牌为止: 从 ...

  8. 记录添加mvn命令,以及安装jar包到本地仓库

    安装版的maven,没有mvn命令,需要先设置环境变量,添加%MAVEN_HOME% =D:\apache-maven-3.3.9path 中添加 %MAVEN_HOME%/bin即可 安装下载好的j ...

  9. 微信小程序学习 一

    1. 目录结构 app.js  —— 必须配置Page({})  在新版本中 app.json  —— 注册,路由不用加后缀,是将整个文件里面的四个文件都注册进去,并且做关联,所以在页面中就不需要引用 ...

  10. Oracle从入门到精通----学习笔记

    书名:<Oracle从入门到精通:视频实战版>秦靖.刘存勇等编著 第4章 SQL基础 1.SQL语言分类 数据定义语言 --- DDL,Data Definition Language 数 ...