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 :active
und .active
siehe 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-router
Wendet automatisch zwei aktive Klassen .router-link-active
und .router-link-exact-active
auf die <router-link>
Komponente an.
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-active
Klasse erhalten, wenn der Pfad ist /foo/bar
.
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-active
und router-link-exact-active
auf 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-active
Klasse nur angewendet, <router-link to="/foo/bar">
wenn der Pfad ist /foo/bar
.
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 exact
Requisite 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 tag
Requisite geändert <router-link tag="li" />
.
Ändern Sie die Standardklassen global
Wenn Sie die von vue-router
global bereitgestellten Standardklassen ändern möchten , können Sie dazu einige Optionen an die vue-router
Instanz ü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-class
und exact-active-class
wie folgt tun:
<router-link to="/foo" active-class="active">foo</router-link>
<router-link to="/bar" exact-active-class="exact-active">bar</router-link>
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>