如何VueJS路由器链接活动样式 [英] How to VueJS router-link active style

问题描述

我的页面当前具有Navigation.vue组件. 我想使每个导航悬停并处于活动状态. 悬停"有效，但活动"无效.

这就是Navigation.vue文件的外观:

My page currently has Navigation.vue component. I want to make the each navigation hover and active. The 'hover' works but 'active' doesn't.

This is how Navigation.vue file looks like :

<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>

这是现在的悬停样子，并且在活动状态下应该完全一样.

This is how hover looks like now and expected exactly same on active.

如果您能给我有关路由器链接有效作品样式的建议，我将不胜感激. 谢谢.

I would appreciate if you give me an advice for styling router-link active works. Thanks.

推荐答案

The :active pseudo-class is not the same as adding a class to style the element.

:active CSS伪类表示元素(例如按钮) 被用户激活.使用鼠标时，激活" 通常在按下鼠标按钮时开始，在按下鼠标按钮时结束 它被释放了.

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.

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

What we are looking for is a class, such as .active, which we can use to style the navigation item.

有关:active和.active之间差异的更清晰示例，请参见以下代码段:

For a clearer example of the difference between :active and .active see the following snippet:

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

vue-router automatically applies two active classes, .router-link-active and .router-link-exact-active, to the <router-link> component.

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

This class is applied automatically to the <router-link> component when its target route is matched.

这是通过使用包含匹配行为来实现的.例如，只要当前路径以/foo/开头或为/foo， <router-link to="/foo"> 都将应用该类.

The way this works is by using an inclusive match behavior. For example, <router-link to="/foo"> will get this class applied as long as the current path starts with /foo/ or is /foo.

因此，如果我们有 <router-link to="/foo"> 和 <router-link to="/foo/bar"> ，则当路径为/foo/bar时，两个组件都将获得router-link-active类.

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> 组件.请注意，在这种情况下，router-link-active和router-link-exact-active这两个类都将应用于该组件.

This class is applied automatically to the <router-link> component when its target route is an exact match. Take into consideration that both classes, router-link-active and router-link-exact-active, will be applied to the component in this case.

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

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

让我们说我们有 <router-link to="/"> ，将会发生的事情是该组件将在每条路线上都处于活动状态.这可能不是我们想要的东西，因此我们可以像这样使用exact道具: <router-link to="/" exact> .现在，只有在/完全匹配时，组件才会应用活动类.

Lets say we have <router-link to="/">, what will happen is that this component will be active for every route. This may not be something that we want, so we can use the exact prop like so: <router-link to="/" exact>. Now the component will only get the active class applied when it is an exact match at /.

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

We can use these classes to style our element, like so:

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

使用tag道具<router-link tag="li" />更改了<router-link>标签.

The <router-link> tag was changed using the tag prop, <router-link tag="li" />.

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

If we wish to change the default classes provided by vue-router globally, we can do so by passing some options to the vue-router instance like so:

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

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

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

Change default classes per component instance (<router-link>)

If instead we want to change the default classes per <router-link> and not globally, we can do so by using the active-class and exact-active-class attributes like so:

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

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

---

v槽API

Vue Router 3.1.0+通过作用域内的插槽提供了低级自定义功能.当我们希望对包装元素(如列表元素<li>)进行样式设置时，这很方便，但仍将导航逻辑保留在锚点元素<a>中.

---

v-slot API

Vue Router 3.1.0+ offers low level customization through a scoped slot. This comes handy when we wish to style the wrapper element, like a list element <li>, but still keep the navigation logic in the anchor element <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>

这篇关于如何VueJS路由器链接活动样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！