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实现路由刷新和导航栏菜单状态保持(局部刷新页面)
一.菜单项激活状态保持 有时,我们在项目中会有这样一个需求,即实现 一个侧导航栏,点击不同的菜单项,右边内容会跟着变化,而页面手动刷新后想要使菜单激活状态保持,那么这个功能该如何实现呢? 现在给出以下 ...
随机推荐
- html_学习地址
源码地址: 玩安卓:https://www.wanandroid.com/project: 博客/博主地址:
- java web开发环境tomcat安装配置
1.下载jdk8并安装 2.下载tomcat windows环境下的免安装版zip包 3.设置两个环境变量 4.在tomcat的bin路径下双击startup.bat 启动tomcat服务器 5.使用 ...
- 生成器函数_yield_yield from_send
生成器函数 ''' yield类似于return 相同: 都返回出去一个值 不同: yield每次返回时, 会记录当前执行的位置 等下次调用生成器, 会从该位置向下走 return 直接终止函数 '' ...
- 记录1-更换mac pro内存,硬盘及恢复系统
我的mac pro是2012年初买的,4G/500G HDD在服役了六年多后速度堪比老牛,以前装的虚拟机压根不敢打开.这几天把内存更换为8G,硬盘升级为samsung的1T SSD,感觉像起死回生一样 ...
- 记录4-Ubuntu 16.04用gparted调整分区
几天在安装双系统时,没注意居然把swap分区设置成了50G.今天才发现,于是用gparted重新分区. 1. sudo apt-get install gparted 2. 重新用u盘启动进入ubun ...
- pandas学习笔记(一)
Pandas是一款开放源码的BSD许可的Python库,为Python编程语言提供了高性能,易于使用的数据结构和数据分析工具.Pandas用于广泛的领域,包括金融,经济,统计,分析等学术和商业领域.在 ...
- liunx vi 学习
vi有两种状态:命令态和编辑态 命令态中常用的命令: 上下左右移动的处理4个箭头外还有h(左),j(下),k(上),l(右) 调到屏幕显示的首行H,尾行L,x行:xG 0将光标移动到行首:$到行尾,M ...
- ELK日志监控平台安装部署简介--Elasticsearch安装部署
最近由于工作需要,需要搭建一个ELK日志监控平台,本次采用Filebeat(采集数据)+Elasticsearch(建立索引)+Kibana(展示)架构,实现日志搜索展示功能. 一.安装环境描述: 1 ...
- eShopOnContainers 看微服务⑤:消息通信
1.消息通信 传统的单体应用,组件间的调用都是使用代码级的方法函数.比如用户登录自动签到,增加积分.我们可以在登录函数调用积分模块的某个函数,为了解耦我们使用以来注入并放弃new Class()这种方 ...
- ubuntu远程windows桌面
最近把系统装成了ubuntu,需要远程windows ,就用到了ubuntu的 rdesktop工具 1.先打开终端输入 rdesktop 看系统是否安装了 rdesktop 如果没有安装需要 ...