&.router-link-active

最新推荐文章于 2024-01-11 14:31:41 发布

cc是闲鱼

最新推荐文章于 2024-01-11 14:31:41 发布

阅读量386

点赞数

分类专栏： vue 文章标签： vue stylus router

本文链接：https://blog.csdn.net/cc_Salted_fish/article/details/102839233

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

router-link 标签在选中的时候会自动给整个标签添加一个 router-link-active的class 你可以根据这个class 设置他的样式。如果再选中其他的。这个class 就会消失。从而样式也就会消失.

&：是stylus预处理器的，它是父级的引用

    .tab-item
      flex:1
      text-align:center
      .tab-link
        padding-bottom :5px
        color: $color-text-1
      &.router-link-active
        .tab-link
          color : $color-theme
          border-bottom :2px solid $color-theme

相当于

.tab-link{
    padding-bottom :5px
    color: $color-text-1
}
.tab-item router-link-active .tab-link{
     color : $color-theme
     border-bottom :2px solid $color-theme
}