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

Simplifions les choses, vous n'avez pas besoin de lire le document sur les "balises personnalisées" (en tant que développeur web depuis 16 ans, j'ai assez de ce genre de balises, comme dans struts, webwork, jsp, rails et maintenant vuejs).

il suffit d'appuyer sur F12, et vous verrez le code source comme :

<div>
    <a href="#/topologies" class="luelue">page1</a> 
    <a href="#/" aria-current="page" class="router-link-exact-active router-link-active">page2</a> 
    <a href="#/databases" class="">page3</a>
</div>

Il suffit donc d'ajouter des styles pour les .router-link-active o router-link-exact-active

Si vous voulez plus de détails, consultez le router-link api :

https://router.vuejs.org/en/api/#router-link