<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. html_学习地址

    源码地址: 玩安卓:https://www.wanandroid.com/project: 博客/博主地址:

  2. java web开发环境tomcat安装配置

    1.下载jdk8并安装 2.下载tomcat windows环境下的免安装版zip包 3.设置两个环境变量 4.在tomcat的bin路径下双击startup.bat 启动tomcat服务器 5.使用 ...

  3. 生成器函数_yield_yield from_send

    生成器函数 ''' yield类似于return 相同: 都返回出去一个值 不同: yield每次返回时, 会记录当前执行的位置 等下次调用生成器, 会从该位置向下走 return 直接终止函数 '' ...

  4. 记录1-更换mac pro内存,硬盘及恢复系统

    我的mac pro是2012年初买的,4G/500G HDD在服役了六年多后速度堪比老牛,以前装的虚拟机压根不敢打开.这几天把内存更换为8G,硬盘升级为samsung的1T SSD,感觉像起死回生一样 ...

  5. 记录4-Ubuntu 16.04用gparted调整分区

    几天在安装双系统时,没注意居然把swap分区设置成了50G.今天才发现,于是用gparted重新分区. 1. sudo apt-get install gparted 2. 重新用u盘启动进入ubun ...

  6. pandas学习笔记(一)

    Pandas是一款开放源码的BSD许可的Python库,为Python编程语言提供了高性能,易于使用的数据结构和数据分析工具.Pandas用于广泛的领域,包括金融,经济,统计,分析等学术和商业领域.在 ...

  7. liunx vi 学习

    vi有两种状态:命令态和编辑态 命令态中常用的命令: 上下左右移动的处理4个箭头外还有h(左),j(下),k(上),l(右) 调到屏幕显示的首行H,尾行L,x行:xG 0将光标移动到行首:$到行尾,M ...

  8. ELK日志监控平台安装部署简介--Elasticsearch安装部署

    最近由于工作需要,需要搭建一个ELK日志监控平台,本次采用Filebeat(采集数据)+Elasticsearch(建立索引)+Kibana(展示)架构,实现日志搜索展示功能. 一.安装环境描述: 1 ...

  9. eShopOnContainers 看微服务⑤:消息通信

    1.消息通信 传统的单体应用,组件间的调用都是使用代码级的方法函数.比如用户登录自动签到,增加积分.我们可以在登录函数调用积分模块的某个函数,为了解耦我们使用以来注入并放弃new Class()这种方 ...

  10. ubuntu远程windows桌面

    最近把系统装成了ubuntu,需要远程windows  ,就用到了ubuntu的 rdesktop工具 1.先打开终端输入 rdesktop  看系统是否安装了  rdesktop  如果没有安装需要 ...