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

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 活跃的作品。谢谢。

原文由 doobean 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

:active CSS 伪类表示用户正在激活的元素（例如按钮）。使用鼠标时，“激活”通常在按下鼠标按钮时开始，在松开鼠标按钮时结束。

我们正在寻找的是一个类，例如 .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 自动将两个活动类 .router-link-active 和 .router-link-exact-active 到 <router-link> 组件

---

router-link-active

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

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

So, if we had <router-link to="/foo"> and <router-link to="/foo/bar"> , both components would get the router-link-active class when the path is /foo/bar .

---

router-link-exact-active

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

Using the same example, if we had <router-link to="/foo"> and <router-link to="/foo/bar"> , the router-link-exact-active class would only be applied to <router-link to="/foo/bar"> when the path is /foo/bar 。

---

确切的道具

假设我们有 <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>

原文由 Ricky 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Vi Quang Hòa 发布，翻译遵循 CC BY-SA 3.0 许可协议