如何 VueJS 路由器链接活动样式

Question

我的页面目前有 Navigation.vue 组件。 我想让每个导航悬停并激活。 “悬停”有效，但“活动”无效。

这就是 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>

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

如果您能给我一些关于设置路由器链接活动作品样式的建议，我将不胜感激。 谢谢。

Answer 1

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

:active CSS 伪类表示一个元素（例如按钮） 由用户激活。使用鼠标时，“激活” 通常在按下鼠标按钮时开始，并在按下鼠标按钮时结束 它被释放了。

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

有关:active 和.active 之间区别的更清晰示例，请参见以下 sn-p：

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 自动将两个活动类 .router-link-active 和 .router-link-exact-active 应用于 <router-link> 组件。

---

router-link-active

当它的目标路由匹配时，这个类会自动应用于 <router-link> 组件。

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

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

---

router-link-exact-active

当 <router-link> 组件的目标路由是 完全 匹配时，此类会自动应用到该组件。考虑到在这种情况下，router-link-active 和 router-link-exact-active 这两个类都将应用于组件。

使用相同的示例，如果我们有 <router-link to="/foo"> 和 <router-link to="/foo/bar">，router-link-exact-activeclass 将仅应用于<router-link to="/foo/bar"> 当路径为/foo/bar。

---

The exact prop

假设我们有 <router-link to="/">，将会发生的情况是该组件将对每条路线都处于活动状态。这可能不是我们想要的，所以我们可以像这样使用exact 属性：<router-link to="/" exact>。现在组件只会在与/ 完全匹配时应用活动类。

---

CSS

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

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

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

---

全局更改默认类

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

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

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

如果我们想要更改每个 <router-link> 的默认类而不是全局的，我们可以使用 active-class 和 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 2

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 3

当您创建路由器时，您可以指定linkExactActiveClass 作为属性来设置将用于活动路由器链接的类。

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 4

如上所述，@Ricky vue-router 自动将两个活动类 .router-link-active 和 .router-link-exact-active 应用于组件。

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

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

Answer 5

只需添加到@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.

这样，只有当前链接是高亮的。这应该适用于大多数情况。

大卫

Answer 6

让我们把事情变得简单，你不需要阅读关于“自定义标签”的文档（作为一个 16 年的 web 开发人员，我有足够的这种标签，例如在 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/en/api/#router-link