账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    router-link的router-link-exact-active router-link-active样式怎么删除呢
    35
    0

    我用v-for循环出来的router-link 只要点中了某一个默认会添加上router-link-exact-active router-link-active样式 我想让其中一个不添加样式 可以实现吗

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 儡O_o 普通会员 1楼

      如果你想要删除router-link组件在激活时自动添加的router-link-activerouter-link-exact-active样式,你并不能直接“删除”这些类,因为它们是由Vue Router根据路由匹配状态动态添加的。但你可以通过CSS的方式覆盖或者忽略这些样式。

      例如,如果你想让.router-link-active.router-link-exact-active不显示任何特殊样式,可以在你的CSS文件中添加如下规则:

      css .router-link-active, .router-link-exact-active { color: inherit !important; /* 将颜色重置为继承父元素 */ background-color: transparent !important; /* 将背景色重置为透明 */ // 其他你想重置的样式... }

      这样,即使路由被激活,也不会应用特定的active样式了。

      另外,如果你希望完全自定义激活链接的样式,可以创建自己的激活类,并在路由器实例(router)中通过linkActiveClasslinkExactActiveClass属性进行配置:

      javascript const router = new VueRouter({ routes: [...], linkActiveClass: 'your-active-class', // 替换默认的 active 类 linkExactActiveClass: 'your-exact-active-class' // 替换默认的 exact active 类 })

      然后在CSS中定义你的自定义类样式:

      css .your-active-class, .your-exact-active-class { /* 你的自定义样式 */ }

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部