如何将样式应用于 Vuejs 中的活动路由器链接

如何解决如何将样式应用于 Vuejs 中的活动路由器链接

我有一个包含多个这样的侧边栏项目的侧边栏

<side-bar>
    <template slot="links">

        <sidebar-item  :link="{name: 'Home',icon: 'ni ni-shop text-primary',path: '/dashboard'}" />
        <sidebar-item  :link="{name: 'Videos',icon: 'ni ni-tv-2 text-primary',path: '/videos'}"/>
        <sidebar-item  :link="{name: 'Category',icon: 'ni ni-single-copy-04 text-primary',path: '/category'}"/>
        <sidebar-item  :link="{name: 'Comments',icon: 'ni ni-ambulance text-primary',path: '/comments'}"/>
        <sidebar-item  :link="{name: 'Artist',icon: 'ni ni-palette text-primary',path: '/artists'}"/>
        <sidebar-item  :link="{name: 'Users',icon: 'ni ni-circle-08 text-primary',path: '/users'}"/>
        <sidebar-item  :link="{name: 'Transactions',icon: 'ni ni-credit-card text-primary',path: '/transactions'}"/>

    </template>
</side-bar>

侧边栏项目有这样的路由器链接

<li class="nav-item bg-white">
<router-link
  :to="link.path"
  @click.native="linkClick"
  class="nav-link"
  :target="link.target"
  :href="link.path"
>
  <template>
      <i :class="link.icon"></i>
      <span class="nav-link-text">{{ link.name }}</span>
  </template>
</router-link>

路由器配置有 linkExactActiveClass: 'active',

我应该怎么做这里的活动侧边栏项目的样式

解决方法

router-link 有一个属性 active-class，它允许您在该元素处于活动状态时在该元素上创建一个类，例如：

<router-link
        active-class="nav__active"
        to="/something"
        class="header__nav"
      > Something
</router-link>

在您的 styles 中：

.header__nav{
    ....
}
.nav__active{
    /* your styles for the active link */
}

如果这就是您要找的，请告诉我