[英]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.