Comment utiliser le style actif router-link de VueJS ?

Question

Ma page a actuellement le composant Navigation.vue. Je veux que chaque navigation soit active et survolée. Le "hover" fonctionne mais pas le "active".

Voici à quoi ressemble le fichier 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>

Et le style est le suivant.

<style>

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

</style>

Voici à quoi ressemble le survol maintenant et je m'attendais à ce que ce soit exactement la même chose en mode actif.

J'apprécierais si vous me donniez un conseil pour le style routeur-lien actif fonctionne. Merci.

Answer 1

Le site :pseudo-classe active n'est pas la même chose que d'ajouter une classe pour donner un style à l'élément.

La pseudo-classe CSS :active représente un élément (tel qu'un bouton) qui est activé par l'utilisateur. Lorsque vous utilisez une souris, l'"activation" commence généralement lorsque le bouton de la souris est enfoncé et se termine lorsque il est relâché.

Ce que nous recherchons est une classe, telle que .active que nous pouvons utiliser pour donner un style à l'élément de navigation.

Pour un exemple plus clair de la différence entre :active y .active voir l'extrait suivant :

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 applique automatiquement deux classes actives, .router-link-active y .router-link-exact-active à la <router-link> composant.

---

router-link-active

Cette classe est appliquée automatiquement à la <router-link> lorsque sa route cible est trouvée.

Cela fonctionne en utilisant un comportement de correspondance inclusif. Par exemple, <router-link to="/foo"> obtiendra cette classe appliquée tant que le chemin d'accès courant commence par /foo/ ou est /foo .

Donc, si nous avions <router-link to="/foo"> y <router-link to="/foo/bar"> les deux composants obtiendraient le router-link-active lorsque le chemin est /foo/bar .

---

router-link-exact-active

Cette classe est appliquée automatiquement à la <router-link> lorsque son itinéraire cible est un exact match. Prenez en considération que les deux classes, router-link-active y router-link-exact-active sera appliqué au composant dans ce cas.

En reprenant le même exemple, si nous avions <router-link to="/foo"> y <router-link to="/foo/bar"> le router-link-exact-active la classe sólo être appliqué à <router-link to="/foo/bar"> lorsque le chemin est /foo/bar .

---

La proposition exacte

Disons que nous avons <router-link to="/"> ce qui se passera, c'est que ce composant sera actif pour chaque route. Ce n'est peut-être pas ce que nous voulons, nous pouvons donc utiliser la fonction exact comme ça : <router-link to="/" exact> . Désormais, la classe active ne sera appliquée au composant que si elle correspond exactement à l'adresse suivante / .

---

CSS

Nous pouvons utiliser ces classes pour donner un style à notre élément, comme suit :

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

Le site <router-link> a été modifié à l'aide de la balise tag prop, <router-link tag="li" /> .

---

Modifier les classes par défaut de manière globale

Si nous souhaitons changer les classes par défaut fournies par vue-router de manière globale, nous pouvons le faire en passant certaines options à l'option vue-router instance comme ça :

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

Modifier les classes par défaut par instance de composant ( <router-link> )

Si, au contraire, nous voulons changer les classes par défaut par <router-link> et non de manière globale, nous pouvons le faire en utilisant l'option active-class y exact-active-class les attributs comme suit :

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

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

---

API pour les fentes en V

Vue Router 3.1.0+ offre une personnalisation de bas niveau par le biais d'un système de gestion de la qualité. fente scopée . Cela s'avère pratique lorsque nous souhaitons donner un style à l'élément d'habillage, comme un élément de liste. <li> mais en conservant la logique de navigation dans l'élément d'ancrage. <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>

Answer 2

https://router.vuejs.org/en/api/router-link.html ajouter l'attribut active-class="active" par exemple :

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

Lorsque vous créez le routeur, vous pouvez spécifier l'adresse de l'utilisateur. linkExactActiveClass comme propriété pour définir la classe qui sera utilisée pour la liaison active du routeur.

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

Ceci est documenté aquí .

Answer 4

Comme mentionné ci-dessus par @Ricky vue-router applique automatiquement deux classes actives, .router-link-active y .router-link-exact-active à l'élément.

Donc, pour changer le lien actif css utiliser :

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

Answer 5

Il suffit de compléter la solution de @Bert pour la rendre plus claire :

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

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

Comme on peut le voir, cette ligne devrait être supprimée :

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

de cette façon, SEUL le lien actuel est mis en évidence. Cela devrait s'appliquer à la plupart des cas.

David