路由样式

@Style
默认会添加两个类:router-link-active和router-link-exact-active 高亮当前路由
可以通过修改其样式来定制 UI
多用于嵌套路由中
更多信息,请访问 RouterLinkProps RouterOptions
属性 Props

<router-link> 标签属性

需要为每个 <router-link> 指定该属性

activeClass

链接在匹配当前路由时被应用到 class

<router-link activeClass="btm" class="nav-item" to="/user">User</router-link>
<router-link active-class="btm" class="nav-item" to="/user">User</router-link>
exactActiveClass

适合多级路由|嵌套路由

使用同上

路由配置项 RouterOptions

在路由配置中指定样式

两个样式类默认为空,通过定制实现个性化开发

linkExactActiveClass

匹配当前路由的 <router-link> 默认的 CSS class。如无,则会使用 router-link-active

无论嵌套路径多么深,只要链接的目标路径是当前路径的一部分,这个类就会被添加

linkExactActiveClass

严格匹配当前路由的 <router-link> 默认的 CSS class。如果没有提供,则会使用 router-link-exact-active

仅当 to 属性精确匹配当前激活的路由时才会应用,通常是最末端的子路由

[] 定制默认样式类样式
.router-link-active {
    color: #f40;
}
    
.router-link-exact-active {
    border-bottom: 1px solid #f40;
}
[] 使用路由配置项,重新定义 linkActiveClass 和 linkExactActiveClass 对应的样式类