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