webentwicklung-frage-antwort-db.com.de

Wie VueJS Router-Link aktiven Stil

Meine Seite enthält derzeit die Komponente Navigation.vue. Ich möchte die einzelnen Navigationselemente schweben lassen und aktivieren. 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 Schwebeflug jetzt aus und wird auf Aktiv genau so erwartet. This is how hover looks like now and expected exactly same on active.

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

38
doobean

Das : aktive Pseudoklasse ist nicht dasselbe wie das Hinzufügen einer Klasse zum Stylen des Elements.

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 beim Drücken der Maustaste und endet beim Loslassen.

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

Ein klareres Beispiel für den Unterschied zwischen :active und .active finden Sie im 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-router wendet automatisch zwei aktive Klassen, .router-link-active und .router-link-exact-active, auf die Komponente <router-link> an.


router-link-active

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

Dies funktioniert unter Verwendung eines inklusiven Übereinstimmungsverhaltens. Mit <router-link to="/foo"> wird diese Klasse angewendet, solange der aktuelle Pfad mit /foo/ beginnt oder /foo lautet.

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


router-link-exact-active

Diese Klasse wird automatisch auf die Komponente <router-link> angewendet, wenn die Zielroute eine genaue Übereinstimmung aufweist. Beachten Sie, dass in diesem Fall beide Klassen, router-link-active und router-link-exact-active, auf die Komponente angewendet werden.

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


Die genaue Stütze

Nehmen wir an, wir haben <router-link to="/">, was passieren wird, ist, dass diese Komponente für jede Route aktiv ist. Dies ist möglicherweise nicht das, was wir wollen, daher können wir die Requisite exact folgendermaßen verwenden: <router-link to="/" exact>. Jetzt wird die Komponente nur dann auf die aktive Klasse angewendet, wenn es sich bei / um eine exakte Übereinstimmung handelt.


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 Stütze tag, <router-link tag="li" /> geändert.


Standardklassen global ändern

Wenn wir die von vue-router bereitgestellten Standardklassen global ändern möchten, können wir dazu einige Optionen an die Instanz vue-router übergeben:

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

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

Wenn wir stattdessen die Standardklassen per <router-link> und nicht global ändern möchten, können wir dies mit active-class und exact-active-class tun = Attribute wie folgt:

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

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

Beim Erstellen des Routers können Sie linkExactActiveClass als 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 dokumentiert hier .

19
Bert

https://router.vuejs.org/en/api/router-link.html Attribut active-class = "active" hinzufügen, 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>
15
Vi Quang Hòa