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文件中配置linkactive-class

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页面中,路由为

vue2.0中关于active-class

,那么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'
}
 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:共享博客 » vue2.0中关于active-class

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活