博客

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 有两种方法：

1、直接在路由js文件中配置linkActiveClass

	export default new Router({
	
	  linkActiveClass: 'active',
	
	})

2、在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页面中，路由为 ，那么

to="/”

和

to="/my"

都可以匹配到，所有都会激活选中样式

五、要解决问题也有两种方式，都是通过加入一个 exact 属性

1、直接在路由js文件中配置linkActiveClass

	export default new Router({
	
	  linkExactActiveClass: 'active',
	
	})

2、在router-link中写入exact

	<router-link to="/" class="menu-home" active-class="active" exact>首页</router-link>

六、不过我不是用 exact 这种方法去解决的，我的方法是

	<router-link to="/home" class="menu-home" active-class="active" exact>首页</router-link>

	//路由中加入重定向
	{
	  	path: '/',
	  	redirect: '/home'
	}