<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. Git技能图

  2. pip install pytest on Mac (EI Capitan 10.11.6)

    升级了Mac 系统后发现用pip安装pytest出现下面链接中的问题,解决方法是在install时候加上--user选项: 1. 切到home directory: cd - 2. install p ...

  3. spring mvc json乱码

    <mvc:annotation-driven> <mvc:message-converters> <!-- 将StringHttpMessageConverter的默认编 ...

  4. 如何让SQLServer的 itemNum 字段 按照数字大小顺序排序

    我的 itemNum 从1到20,可是超过了SQLServer的默认排序这样的1101112...19234567如何才能让排序成为这样1234567891011.. . 解决办法:因为 itemNu ...

  5. eclipse注解模板,实实在在的

    1.可以引用其他codetemplate.xml 2.可以自己配置,很快,就几个主要的,个人建议这个,配一次妥妥的,以后就会了,也不用搭理模板了 3.按照公司要求 拿去https://www.jian ...

  6. The component and implementation of a basic gradient descent in python

    in my impression, the gradient descent is for finding the independent variable that can get the mini ...

  7. c++数据类型漫谈

    在计算机眼里所有数据都是0101,二进制才是物理世界的主宰,c++的数据类型相对其他高级语言是相对较细的,因为是继承C而来,但是c++为什么要设计这么多数据类型呢?因为人类难以理解二进制,这就是数据类 ...

  8. Hive:map字段存储和取用 ( str_to_map函数 )

    str_to_map(字符串参数, 分隔符1, 分隔符2) 使用两个分隔符将文本拆分为键值对. 分隔符1将文本分成K-V对,分隔符2分割每个K-V对.对于分隔符1默认分隔符是 ',',对于分隔符2默认 ...

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

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

  10. [Linux]Ubuntu 16.04 远程桌面

    来源:http://blog.csdn.net/zz_1215/article/details/77921405 先吐槽一下,网上教的方法都是半桶水,都被教到连接后出现灰屏,只有这个博主(zz_121 ...