web-dev-qa-db-fra.com

Comment faire pour voirJS style actif routeur-lien

Ma page contient actuellement le composant Navigation.vue. Je veux que chaque navigation soit stationnaire et active. Le survol fonctionne, mais pas le mode actif.

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 ce qui suit est le style.

<style>

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

</style>

Voici à quoi ressemble le survol maintenant et on s'attend à ce qu'il soit exactement pareil en mode actif. This is how hover looks like now and expected exactly same on active.

Je vous serais reconnaissant si vous me donnez un conseil pour le style des travaux actifs routeur-lien. Merci.

vue.jsvue-routerrouterlink
38
doobean

La : pseudo-classe active n'est pas la même chose que d'ajouter une classe pour styler l'élément.

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

Nous cherchons une classe, telle que _.active_, que nous pouvons utiliser pour styler l'élément de navigation.

Pour obtenir un exemple plus clair de la différence entre _:active_ et _.active_, voir l'extrait de code 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>_

Routeur Vue

_vue-router_ applique automatiquement deux classes actives, _.router-link-active_ et _.router-link-exact-active_, au composant <router-link>.

router-link-active

Cette classe est appliquée automatiquement au composant <router-link> lorsque son itinéraire cible est mis en correspondance.

Cela fonctionne en utilisant un comportement de correspondance inclusif. Par exemple, <router-link to="/foo"> appliquera cette classe tant que le chemin actuel commencera par _/foo/_ ou sera _/foo_.

Donc, si nous avions <router-link to="/foo"> et <router-link to="/foo/bar">, les deux composants obtiendront le _router-link-active_ class lorsque le chemin est _/foo/bar_.

router-link-exact-active

Cette classe est appliquée automatiquement au composant <router-link> lorsque son itinéraire cible est un exact rencontre. Tenez compte du fait que les deux classes, _router-link-active_ et _router-link-exact-active_, seront appliquées au composant dans ce cas.

En utilisant le même exemple, si nous avions <router-link to="/foo"> et <router-link to="/foo/bar">, la classe _router-link-exact-active_ serait seulement appliqué à <router-link to="/foo/bar"> lorsque le chemin est _/foo/bar_.

Le prop exact

Disons que nous avons <router-link to="/">, ce qui va arriver, c’est que ce composant sera actif pour chaque itinéraire. Cela peut ne pas être quelque chose que nous voulons, nous pouvons donc utiliser la propriété exact comme suit: <router-link to="/" exact>. Désormais, le composant ne sera appliqué à la classe active que s'il correspond exactement à _/_.

CSS

Nous pouvons utiliser ces classes pour styler notre élément, comme ceci:

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

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

Changer les classes par défaut globalement

Si nous souhaitons changer les classes par défaut fournies par _vue-router_ globalement, nous pouvons le faire en transmettant certaines options à l'instance _vue-router_ comme suit:

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

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

Si au lieu de cela nous voulons changer les classes par défaut par <router-link> et non globalement, nous pouvons le faire en utilisant le active-class et exact-active-class attributs comme ceci:

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

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

Lors de la création du routeur, vous pouvez spécifier la propriété linkExactActiveClass pour définir la classe à utiliser pour le lien de routeur actif.

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

19
Bert

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>
15
Vi Quang Hòa