Wie man einen aktiven VueJS-Router-Link-Stil erstellt

Meine Seite enthält derzeit die Navigation.vue-Komponente. Ich möchte jede Navigation schweben und aktiv machen. Der "Schwebeflug" funktioniert, "aktiv" jedoch nicht.

So sieht die Datei Navigation.vue aus:

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

Und das Folgende ist der Stil.

<style>

   nav li:hover,
   nav li:active{
      background-color: indianred;
      cursor: pointer;
    }

</style>

So sieht der Schwebeflug jetzt aus und wird auf Aktiv genau genauso erwartet.

Ich würde mich freuen, wenn Sie mir einen Rat für das Styling von Router-Link-aktiven Werken geben. Vielen Dank.

Die : aktive Pseudoklasse ist nicht dasselbe wie das Hinzufügen einer Klasse, um das Element zu formatieren.

Die: active CSS-Pseudoklasse repräsentiert ein Element (z. B. eine Schaltfläche), das vom Benutzer aktiviert wird. Bei Verwendung einer Maus beginnt die "Aktivierung" normalerweise, wenn die Maustaste gedrückt wird, und endet, wenn sie losgelassen wird.

Was wir suchen, ist eine Klasse wie .active, mit der wir das Navigationselement formatieren können.

Ein klareres Beispiel für den Unterschied zwischen :activeund .activesiehe den folgenden Ausschnitt:

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

vue-routerWendet automatisch zwei aktive Klassen .router-link-activeund .router-link-exact-activeauf die <router-link>Komponente an.

router-link-active

Diese Klasse wird automatisch auf die <router-link>Komponente angewendet, wenn ihre Zielroute übereinstimmt.

Dies funktioniert mithilfe eines inklusiven Übereinstimmungsverhaltens. Zum Beispiel <router-link to="/foo">wird diese Klasse , solange der Strompfad beginnt angelegt bekommen /foo/oder ist /foo.

Wenn wir also <router-link to="/foo">und hätten <router-link to="/foo/bar">, würden beide Komponenten die router-link-activeKlasse erhalten, wenn der Pfad ist /foo/bar.

router-link-exact-active

Diese Klasse wird automatisch auf die <router-link>Komponente angewendet, wenn ihre Zielroute genau übereinstimmt. Beachten Sie, dass in diesem Fall beide Klassen router-link-activeund router-link-exact-activeauf die Komponente angewendet werden.

Wenn wir im selben Beispiel <router-link to="/foo">und hätten <router-link to="/foo/bar">, würde die router-link-exact-activeKlasse nur angewendet, <router-link to="/foo/bar">wenn der Pfad ist /foo/bar.

Die genaue Stütze

Nehmen wir an <router-link to="/">, wir haben , was passieren wird, ist, dass diese Komponente für jede Route aktiv ist. Dies ist möglicherweise nicht das, was wir wollen, also können wir die exactRequisite wie folgt verwenden : <router-link to="/" exact>. Jetzt wird auf die Komponente die aktive Klasse nur angewendet, wenn sie genau übereinstimmt /.

CSS

Wir können diese Klassen verwenden, um unser Element wie folgt zu gestalten:

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

Das <router-link>Tag wurde mit der tagRequisite geändert <router-link tag="li" />.

Ändern Sie die Standardklassen global

Wenn Sie die von vue-routerglobal bereitgestellten Standardklassen ändern möchten , können Sie dazu einige Optionen an die vue-routerInstanz übergeben:

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

Standardklassen pro Komponenteninstanz ändern ( <router-link>)

Wenn wir stattdessen die Standardklassen pro <router-link>und nicht global ändern möchten , können wir dies mithilfe der Attribute active-classund exact-active-classwie folgt tun:

<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+ bietet eine einfache Anpassung über einen Steckplatz mit Gültigkeitsbereich . Dies ist praktisch, wenn Sie das Wrapper-Element wie ein Listenelement formatieren möchten <li>, die Navigationslogik jedoch im Ankerelement beibehalten möchten <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>

Wenn Sie den Router erstellen, können Sie die linkExactActiveClassals Eigenschaft angeben , um die Klasse festzulegen, die für die aktive Router-Verbindung verwendet wird.

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.
})

Dies ist hier dokumentiert .

https://router.vuejs.org/en/api/router-link.html Attribut hinzufügen active-class = "active" zB:

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

Wie oben von @Ricky erwähnt, wendet der Vue-Router automatisch zwei aktive Klassen .router-link-activeund .router-link-exact-activeauf die Komponente an.

Um den aktiven Link CSS zu ändern, verwenden Sie:

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

Fügen Sie einfach die Lösung von @ Bert hinzu, um es klarer zu machen:

    const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes,
  linkExactActiveClass: "active" // active class for *exact* links.
})

Wie man sehen kann, sollte diese Zeile entfernt werden:

linkActiveClass: "active", // active class for non-exact links.

Auf diese Weise wird NUR der aktuelle Link beleuchtet. Dies sollte in den meisten Fällen gelten.

David