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字体加粗标签与写法
在html中字体加粗的标签为<b>标签,当我们使用了该标签,字体就会加粗,一般用于注明重要信息,强调文字上面写法如下 字体加粗:<b>这里的字体就会加粗</b> 效 ...
- PROC IMPORT 选项
GETNAMES=YES;导入源文件字段名作为SAS数据集的字段名MIXED=NO;若某一列中包含数值型和字符型变量,将数值型按照缺省值处理.若选的是YES则是将数值型转换成字符型存储,默认为NOSC ...
- centos7搭建GitLab
1.安装依赖 yum -y install policycoreutils openssh-server openssh-clients postfix policycoreutils-python ...
- 研究并尝试改进Vyeshal
我想研究Vyeshal,这样就不可避免的要用到游戏中的语音.然而游戏内的语音文件是.bank类型的,如何转化为可听文件是个问题.
- C语言排序算法学习笔记——选择类排序
选择排序:每一趟(例如第i趟)在后面n-i+1(i=1,2,3,……,n-1)个待排序元素中选取关键字最小的元素,作为有序子序列的第i个元素,直到n-1趟做完,待排序元素只剩下1个,就不用再选了. 简 ...
- Spark-RPC理解
基本架构 Akka Actor式RPC架构 Spark采用的是AkkaActor架构实现RPC,但是实际使用过程为了兼容不同节点之间的文件下载,采用Netty来实现Actor功能. Spark RPC ...
- flask同源策略解决办法及flask-cors只允许特定域名跨域
falsk 同源策略解决办法: 使用 flask-cors 包 并且 在代码里 加响应的一行代码解决. from flask import Flask, session from flask_cors ...
- 走进HashMap
1.手写实现HashMap 2.解析代码并阐述HashMap1.7到1.8的变化 3.HashMap的遍历方式 4.HashMap与HashSet,Hashtable,ConcurrentHashMa ...
- 7种清除浮动 (感觉br最好用然而我用的还是overflow)
1.clear清除浮动(添加空div法) 在浮动元素下方添加空div,并给该元素写css样式: {clear:both;height:0;overflow:hidden;} 2.方法:给浮动元素父级设 ...
- Spring Boot微服务如何集成fescar解决分布式事务问题?
什么是fescar? 关于fescar的详细介绍,请参阅fescar wiki. 传统的2PC提交协议,会持有一个全局性的锁,所有局部事务预提交成功后一起提交,或有一个局部事务预提交失败后一起回滚,最 ...