如何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之间差异的更清晰示例，请参阅以下代码段：

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"> ，当路径为{时，两个组件都会获得router-link-active类{1}}。

router-link-exact-active

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

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

The exact prop

假设我们有 /foo/bar ，将会发生这个组件对每条路线都有效。这可能不是我们想要的，因此我们可以像{em> <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> 的默认类而不是全局更改默认类，我们可以使用active-class和exact-active-class属性来更改：

<router-link>

Answer 2

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

如上所述，@ 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