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

的:有源伪类是不一样的添加类样式化元件.

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

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

对于之间的差别更清楚的例子.active,并vue-router看到下面的代码片段:

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-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,两个组件都会/foo/bar在路径出现时获得类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-active,则<router-link to="/foo/bar">该类仅适用于/foo/bar路径时<router-link to="/">.

确切的道具

让我们说,我们exact会发生什么,这个组件将对每条路线都有效.这可能不是我们想要的东西,所以我们可以这样使用<router-link to="/" exact>道具:/.现在,组件只有在完全匹配时才会获得应用的活动类<router-link>.

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" />道具,vue-router.

全局更改默认类

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

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

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

如果我们想要更改默认类active-class而不是全局,我们可以通过使用exact-active-class和这样的<li>属性来实现:

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

<router-link to="/bar" exact-active-class="exact-active">bar</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.
})

这在此处记录.

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

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

正如@Ricky vue-router 上面提到的那样，vue-router 会自动将两个活动类.router-link-active和.router-link-exact-active, 应用到组件。

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

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