如何 VueJS 路由器链接的主动样式

我的页面当前有 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>

这就是悬停现在的样子，并且在活动状态下期望完全一样。

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

如果你能给我一个关于 router-link活动作品造型的建议，我将不胜感激。 谢谢。

219889 次浏览
小开

在创建路由器时，可以将 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.
})

这是记录在案的 给你。

小开
最佳答案

: 活动的伪类不同于添加一个类来设计元素的样式。

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

router-link-active

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

其工作方式是使用包含匹配行为。例如，只要当前路径以 /foo/开始或者以 /foo开始，<router-link to="/foo">就会得到这个类的应用。

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

router-link-exact-active

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

使用相同的例子，如果我们有 <router-link to="/foo">和 <router-link to="/foo/bar">，当路径是 /foo/bar时，router-link-exact-active类将 只有应用到 <router-link to="/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;
}

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

全局更改默认类

如果我们希望在全局范围内更改 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 槽 API

Vue 路由器3.1.0 + 通过 有活动范围的缝隙提供低级定制。当我们希望对包装器元素(如列表元素 <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>
小开

Https://router.vuejs.org/en/api/router-link.html Add 属性 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>
小开

只要加上@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.

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

大卫

小开

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

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

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

让我们把事情简单化，你不需要阅读关于“自定义标签”的文档(作为一个16年的 Web 开发人员，我有足够的这种类型的标签，比如在 struts，webwork，jsp，Railsand now it’s 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


提交答案