如何使用 VueJS router-link active 样式

Question

我的页面目前有 Navigation.vue 个组件。我想让每个导航悬停并处于活动状态。 hover 有效，但 active 无效。

这是 Navigation.vue 文件的样子：

<template>
  <div>
    <nav class="navbar navbar-expand-lg fixed-top row">
      <router-link tag="li" class="col" class-active="active" to="/" exact>TIME</router-link>
      <router-link tag="li" class="col" class-active="active" to="/CNN" exact>CNN</router-link>
      <router-link tag="li" class="col" class-active="active" to="/TechCrunch" exact>TechCrunch</router-link>
      <router-link tag="li" class="col" class-active="active" to="/BBCSport" exact>BBC Sport</router-link>
    </nav>
  </div>
</template>

下面是样式

<style>
nav li:hover,
nav li:active {
  background-color: indianred;
  cursor: pointer;
}
</style>

这就是悬停现在的样子，与活动时的预期完全相同。

如果您能给我一些关于样式 router-link 活跃作品的建议，我将不胜感激。谢谢。

Answer 1

创建路由器时，可以将 linkExactActiveClass 指定为属性以设置将用于活动路由器 link 的 class。

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes,
  linkActiveClass: "active", // active class for non-exact links.
  linkExactActiveClass: "active" // active class for *exact* links.
})

这已记录在案 here。

Answer 2

:active pseudo-class 与添加 class 来设置元素样式不同。

The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the mouse button is pressed down and ends when it is released.

我们正在寻找的是 class，例如 .active，我们可以使用它来设置导航项的样式。

要更清楚地了解 :active 和 .active 之间的区别，请参阅以下代码段：

li:active {
  background-color: #35495E;
}

li.active {
  background-color: #41B883;
}

<ul>
  <li>:active (pseudo-class) - Click me!</li>
  <li class="active">.active (class)</li>
</ul>

Vue-路由器

vue-router 自动将两个活动的 classes，.router-link-active 和 .router-link-exact-active 应用到 <router-link>组件。

`router-link-active`

此 class 在其目标路由匹配时自动应用于 <router-link> 组件。

其工作方式是使用包容性匹配行为。例如，只要当前路径以 /foo/ 或 /foo 开头，<router-link to="/foo"> 就会应用此 class。 64=]

所以，如果我们有 <router-link to="/foo"> 和 <router-link to="/foo/bar">，两个组件都会得到 router-link-active class 当路径为 /foo/bar.

`router-link-exact-active`

当目标路由是精确匹配时，class 会自动应用于 <router-link> 组件.考虑到 classes、router-link-active 和 router-link-exact-active 在这种情况下都将应用于组件。

使用相同的示例，如果我们有 <router-link to="/foo"> 和 <router-link to="/foo/bar">，则 [=32=当路径为 /foo/bar.[=64= 时，]class 将仅应用于 <router-link to="/foo/bar"> ]

The exact prop

假设我们有 <router-link to="/">，将会发生的是该组件将对每条路线激活。这可能不是我们想要的，所以我们可以像这样使用 exact 属性：<router-link to="/" exact>。现在组件只有在 /.

完全匹配时才会应用活动的 class

CSS

我们可以使用这些 classes 来设置元素的样式，如下所示：

 nav li:hover,
 nav li.router-link-active,
 nav li.router-link-exact-active {
   background-color: indianred;
   cursor: pointer;
 }

使用 tag 属性更改了 <router-link> 标签，<router-link tag="li" />。

全局更改默认值 classes

如果我们希望全局更改 vue-router 提供的默认 classes，我们可以通过将一些选项传递给 vue-router 实例来实现，如下所示：

const router = new VueRouter({
  routes,
  linkActiveClass: "active",
  linkExactActiveClass: "exact-active",
})

更改每个组件实例的默认 classes (`<router-link>`)

如果我们想更改每个 <router-link> 的默认 classes 而不是全局更改，我们可以使用 active-class and exact-active-class 属性如下：

<router-link to="/foo" active-class="active">foo</router-link>

<router-link to="/bar" exact-active-class="exact-active">bar</router-link>

v-slot API

Vue Router 3.1.0+ 通过 scoped slot 提供低级定制。当我们希望像列表元素 <li> 一样设置包装器元素的样式时，这会很方便，但仍将导航逻辑保留在锚元素 <a>.

中

<router-link
  to="/foo"
  v-slot="{ href, route, navigate, isActive, isExactActive }"
>
  <li
    :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"
  >
    <a :href="href" @click="navigate">{{ route.fullPath }}</a>
  </li>
</router-link>

Answer 3

https://router.vuejs.org/en/api/router-link.html 添加属性 active-class="active" 例如：

<ul class="nav navbar-nav">
    <router-link tag="li" active-class="active" to="/" exact><a>Home</a></router-link>
    <router-link tag="li" active-class="active" to="/about"><a>About</a></router-link>
    <router-link tag="li" active-class="active" to="/permission-list"><a>Permisison</a></router-link>
</ul>

Answer 4

只需添加到@Bert 的解决方案中以使其更清楚：

    const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes,
  linkExactActiveClass: "active" // active class for *exact* links.
})

如您所见，应删除这一行：

linkActiveClass: "active", // active class for non-exact links.

这样，只有当前的 link 被高亮显示。这应该适用于大多数情况。

大卫

Answer 5

正如@Ricky 上面提到的，vue-router 自动将两个活动的类、.router-link-active 和 .router-link-exact-active 应用于 <router-link> 组件。

因此，要更改活动 link css 使用：

.router-link-exact-active {
  //your desired design when link is clicked
  font-weight: 700;
}

Answer 6

为了简单起见，你不需要阅读关于“自定义标签”的文档（作为一个 16 年的网络开发人员，我有足够的这种标签，例如 struts， webwork, jsp, rails 现在是 vuejs)

只需按 F12，您将看到如下源代码：

<div>
  <a href="#/topologies" class="luelue">page1</a> 
  <a href="#/" aria-current="page" class="router-link-exact-active router-link-active">page2</a> 
  <a href="#/databases" class="">page3</a>
</div>

所以只需为 .router-link-active 或 .router-link-exact-active

添加样式

如果您需要更多详细信息，请查看 router-link api： https://router.vuejs.org/guide/#router-link

如何使用 VueJS router-link active 样式

How to VueJS router-link active style

vue.js

vue-router

routerlink

Vue-路由器

`router-link-active`

`router-link-exact-active`

The exact prop

CSS

全局更改默认值 classes

更改每个组件实例的默认 classes (`<router-link>`)

v-slot API

如何使用 VueJS router-link active 样式

How to VueJS router-link active style

Vue-路由器

CSS

全局更改默认值 classes

更改每个组件实例的默认 classes (<router-link>)

更改每个组件实例的默认 classes (`<router-link>`)