vue2.0中关于active-class
一、首先,active-class是什么,
active-class是vue-router模块的router-link组件中的属性,用来做选中样式的切换;
相关可查阅文档:https://router.vuejs.org/zh-cn/api/router-link.html
二、在vue-router中要使用active-class有两种方法:
方法一:直接在路由js文件中配置linkActiveClass
export default new Router({ linkActiveClass: 'active', })
方法二:在router-link中写入active-class
<router-link to="/home" class="menu-home" active-class="active">首页</router-link>
三、最近在项目中出现一个问题,使用第二种方法添加active-class,跳转到my页面后,两个router-link始终都会有选中样式,代码如下
<div class="menu-btn">
<router-link to="/" class="menu-home" active-class="active">
首页
</router-link>
</div>
<div class="menu-btn">
<router-link to="/my" class="menu-my" active-class="active">
我的
</router-link>
</div>
四、后来发现是因为 to="/" 引起的,active-class选择样式时根据路由中的路径去匹配,然后显示,
·例如在my页面中,路由为 localhost:8080/#my ,那么to="/”和to="/my"都可以匹配到,所有都会激活选中样式
五、要解决问题并达到效果,有三种方式,都是通过加入一个exact属性
方式一:直接在路由js文件中配置linkActiveClass,然后在标签中写入exact
export default new Router({ linkExactActiveClass: 'active', })
<router-link to="/" class="menu-home" exact>首页</router-link>
方式二:router-link中写入exact
<router-link to="/" class="menu-home" active-class="active" exact>首页</router-link>
方式三:将acrive-class换成exact-active-class
<router-link to="/" class="menu-home" exact-active-class="active" >首页</router-link>
vue2.0中关于active-class的更多相关文章
- vue2.0 中#$emit,$on的使用详解
vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on 1. vm.$on( event, callback ) 监听当前实例上的自定义事件.事件可以 ...
- Vue2.0中的transition组件
组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...
- router-view在vue2.0中不显示,解决方法
学习的router-view路由一直不显示,我翻看vue文档,花费1个小事终于找到原因,希望我的问题能给初学的同学,带来福音,版本不一样,真的烦 在此总结记录,以免以后在此遇到此问题 //配置路由 c ...
- vue2.0中使用pug(jade)
第一部分:pug(jade)模板引擎 pug,原名jade,是流行的HTML模板引擎,它是HAML在JavaScript上的实现,最大的特色是使用缩进排列替代成对标签. 它简化了HTML的成对标签的写 ...
- vue2.0中使用less
第一部分:Less语言 与上一篇<vue2.0中使用sass>介绍的Sass语言一样,Less语言也是一种CSS的扩展语言,增加了变量.混合(minin).函数等功能,让CSS更易维护.方 ...
- vue2.0中使用sass
第一部分:Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性 ...
- Vue2.0中v-for迭代语法变化(key、index)【转】
转自:http://blog.csdn.net/sinat_35512245/article/details/53966788 Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下:但是v ...
- Vue2.0中的路由配置
Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: ...
- vue2.0中,由于页面完成之后dom还未加载完成如何进行操作
再vue中,当页面加载完成以后,dom还没有加载,是无法获取进行操作的,但是在vue2.0中提供了一个方法:this.$nextTick,在这个回调函数里面写dom操作即可: 如下代码: create ...
- vue2.0中动画
#vue2.0中css动画不显示的坑: transition中包含的两个标签如果相同(此处都是p标签),需要为元素指定key.如果标签名不同的话,不指定key也可以出现动画效果. #vue2.0中js ...
随机推荐
- 【Oracle】创建角色
任务:创建角色 1)创建角色sse_role,授予create session 权限 2)创建角色tblo_role,授予CREATE PROCEDURE, CREATE SEQUENCE, CREA ...
- [翻译]内存一致性模型 --- memory consistency model
I will just give the analogy with which I understand memory consistency models (or memory models, fo ...
- hiho1804 - 整数分解、组合数、乘法逆元
题目链接 题目叙述很啰嗦,可以简化为:n个球[1-1e5],放到m个不同的桶里,一共多少种不同的放法.[桶里可以不放] ---------------------------------------- ...
- IDEA使用GsonFormat完成JSON和JavaBean之间的转换
原文地址:https://www.leshalv.net/posts/12625/ 前言: 之前处理接口传来的一堆数据,用jsonObject很难受,后面就用gosn来弄,配合这个工具体验很好. 转: ...
- BZOJ1143: [CTSC2008]祭祀river 网络流_Floyd_最大独立集
Description 在遥远的东方,有一个神秘的民族,自称Y族.他们世代居住在水面上,奉龙王为神.每逢重大庆典, Y族都 会在水面上举办盛大的祭祀活动.我们可以把Y族居住地水系看成一个由岔口和河道组 ...
- win10更新后程序路径盘符变成*星号解决方法
发现这个问题是当我在命令行里输入java -version时提示 找不到*:\Program Files\Java...之类的 怎么好好的D:\Program Files\Java变成了*:\Prog ...
- 死磕itchat源码--__init__.py
itchat包中的__init__.py是该库的入口:在该文件中的源码如下: # -*- coding: utf-8 -*- from . import content from .core impo ...
- 如何批量导入excel数据至数据库(MySql)--工具phpMyAdmin
之前由于数据储存使用excel保存了所有数据,经过初步数据筛选,数据量近4000条.一条一条录入数据库显然是不可行的.以下是我所操作的步骤: 1.只保留excel的数据部分,去除第一行的具体说明 2. ...
- [poj 2411]Mondriaan's Dream (状压dp)
Mondriaan's Dream Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 18903 Accepted: 10779 D ...
- MYSQL存储过程初步认知
存储过程(Stored Procedure): 一组可编程的函数,是为了完成特定功能的SQL语句集,经编译创建并保存在数据库中,用户可通过指定存储过程的名字并给定参数(需要时)来调用执行. 优点:将重 ...