[英]How to apply styles to an active router-link in 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 */
}
如果這就是您要找的,請告訴我
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.