vue根据路由变换,切换导航栏样式
<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根据路由变换,切换导航栏样式的更多相关文章
- 用Vue来实现音乐播放器(五):路由配置+顶部导航栏组件开发
路由配置 在router文件夹下的index.js中配置路由 import Vue from 'vue' import Router from 'vue-router'//配置路由前先引入组件impo ...
- 微信小程序------导航栏样式、tabBar导航栏
一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { "pages":[ " ...
- 微信小程序入门四: 导航栏样式、tabBar导航栏
实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { & ...
- Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...
- Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式
Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...
- React Navigation 导航栏样式调整+底部角标消息提示
五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬! 这是坚持学习react-native的第二篇文章,可能会迟到,但是绝不会缺席,这篇要涉及到的是re ...
- React-Native 之 GD (二)自定义共用导航栏样式
1.自定义导航栏样式 步骤一:从效果图中可以看出,导航栏的样式都差不多,因为我们前面已经设置了 Navigator ,这边的话我们还需要自定义 Navigator 的样式,可以看到所有的 Naviga ...
- Vue 如何实现一个底部导航栏组件
参考网址: https://www.jianshu.com/p/088936b7b1bd/ Vue 如何实现一个底部导航栏组件 可以看到父组件是知道我点击了底部TabBar的哪个item的. 实现 实 ...
- vue+el-menu实现路由刷新和导航栏菜单状态保持(局部刷新页面)
一.菜单项激活状态保持 有时,我们在项目中会有这样一个需求,即实现 一个侧导航栏,点击不同的菜单项,右边内容会跟着变化,而页面手动刷新后想要使菜单激活状态保持,那么这个功能该如何实现呢? 现在给出以下 ...
随机推荐
- [UE4]重构Grab和Drop
一.在前面的实例中是把Grab和Drop逻辑放到SimVRHand手柄对象里面,从面向对象来看,Grab和Drop逻辑应该放在被抓取的对象中,因为可能每个对象被抓取后要执行的Grab和Drop逻辑都不 ...
- symfony generate bundle autoload failed的解决办法
I also encountered this problem,I add new bundle namespace in composer.json"autoload": { & ...
- 【吴恩达课后编程作业】第二周作业 - Logistic回归-识别猫的图片
1.问题描述 有209张图片作为训练集,50张图片作为测试集,图片中有的是猫的图片,有的不是.每张图片的像素大小为64*64 吴恩达并没有把原始的图片提供给我们 而是把这两个图片集转换成两个.h5文件 ...
- stm32 uart 中断 蜜汁bug
在项目中,使用stm32f103,配置uart1接收RXNE中断,使用DMA来进行UART1的发送. 初始化代码如下: void uart_init(u32 bound) { GPIO_InitTyp ...
- 深入理解Major GC, Full GC, CMS
很多人都分不清Major GC, Full GC的概念,事实上我查了下资料,也没有查到非常精确的Major GC和Full GC的概念定义.分不清这两个概念可能就会对这个问题疑惑:Full GC会引起 ...
- C#导出 Excel 时, 生成 CheckBox 控件
在使用 Microsoft.Office.Interop.Excel 组件导出Excel 表格时,要把导出前的 CheckBox 控件一同导出到 excel 表格中,对于这个功能 看似很简单,但 M ...
- python向config、ini文件读取写入
config读取操作 cf = configparser.ConfigParser() # 实例化对象 cf.read(filename) # 读取文件 cf.sections() # 读取secti ...
- 封装poi导入篇
前言 有封装的想法好久了,项目中有不少地方需要使用导入功能,导入虽说不能,但是每次都要为了特定类写一个特定方法,很麻烦,我很讨厌一直写这种东西了,正好趁着这次机会就写一个可以解决这种问题的小项目. m ...
- Javascript面向对象编程(二)
子承父业 该方法利用了call,apply,按照原有的方式进行复制,做一些改进,最后进行事务处理.废话不多说,直接看例子. 在这里我提一下,call和apply的异同:它们两个都可以改变this指向, ...
- 从零开始mycat实验环境搭建
版本说明 本机: jdk 8 使用IntelliJ IDEA调试MyCAT 1.6 release 主机一:droplet CentOS 7.5 x86_64 MyCAT 1.6 release O ...