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实现路由刷新和导航栏菜单状态保持(局部刷新页面)
一.菜单项激活状态保持 有时,我们在项目中会有这样一个需求,即实现 一个侧导航栏,点击不同的菜单项,右边内容会跟着变化,而页面手动刷新后想要使菜单激活状态保持,那么这个功能该如何实现呢? 现在给出以下 ...
随机推荐
- Android Studio Gradle配置工具开发
by 蔡建良 2019-3-9 QQ: 304125648 Android Studio导入项目经常出现卡死的情况.针对Gradle更新配置的问题,网上已经有详细的方法,但也很烦索,步骤也很多. 因此 ...
- GSM与GPRS的区别
1. GSM是全球移动通讯系统(Global System for Mobile Communications)的简称 2. GPRS是通用分组无线业务(General Packet Ra ...
- vs关于“当前不会命中断点 还没有为该文档加载任何符号”的解决方法
首先调式的时候确定在debug模式下, 解决方法:工具-选项-调试 -(启用“仅我的代码”)勾去掉.
- mysql中的int和tinyint、varchar和char、DateTime和TimeStamp区别
一.int和tinyint的区别 大小: tinyint在mysql中占用1个字节 即: 1 bytes = 8 bit ,一个字节最多可以代表的数据长度是2的8次方:11111111 = 256 在 ...
- Android 开发 获取设备信息与App信息
设备信息 设备ID(DeviceId) 获取办法 android.telephony.TelephonyManager tm = (android.telephony.TelephonyManager ...
- 数据分析与科学计算可视化-----用于科学计算的numpy库与可视化工具matplotlib
一.numpy库与matplotlib库的基本介绍 1.安装 (1)通过pip安装: >> pip install matplotlib 安装完成 安装matplotlib的方式和nump ...
- matlab-双摆仿真
在物理学和数学中,在动力系统领域,双摆是一个摆锤,另一个摆锤连接在其末端,是一个简单的物理系统,具有丰富的动态特性,对初始条件具有很强的敏感性.双摆的运动由一组耦合的常微分方程控制并且是混沌的. 由于 ...
- SpringBoot整合StringData JPA
目录 SpringBoot整合StringData JPA application.yml User.class UserRepository.java UserController SpringBo ...
- Burpsuite Sqlmap Nmap入门总结
burpsuite sqlmap nmap 简介 sqlmap基础 五种独特sql注入技术: 基于布尔类型的盲注 基于时间的盲注 基于报错注入 联合查询注入 堆查询注入 sqlmap入门 1.判断是否 ...
- 纠结了一下午的问题:运行opencv的HoughLinesP函数出错
问题描述:检测出的直线数量显然不对,非常巨大.程序运行崩溃. 解决办法:在添加附加依赖项时,Dubug模式只添加opencv_world310d.lib,Release模式下只添加opencv_wor ...