Solución:
La pseudoclase: active no es lo mismo que agregar una clase para darle estilo al elemento.
La pseudoclase: active CSS representa un elemento (como un botón) que está siendo activado por el usuario. Cuando se usa un mouse, la “activación” generalmente comienza cuando se presiona el botón del mouse y finaliza cuando se suelta.
Lo que buscamos es una clase, como .active, que podemos usar para diseñar el elemento de navegación.
Para un ejemplo más claro de la diferencia entre :active y .active vea el siguiente fragmento:
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>Enrutador Vue
vue-router aplica automáticamente dos clases activas, .router-link-active y .router-link-exact-active, al <router-link> componente.
router-link-active
Esta clase se aplica automáticamente a la <router-link> componente cuando su ruta de destino coincide.
La forma en que esto funciona es mediante el uso de un comportamiento de coincidencia inclusivo. Por ejemplo, <router-link to="/foo"> obtendrá esta clase aplicada siempre que la ruta actual comience con /foo/ o es /foo.
Entonces, si tuviéramos <router-link to="/foo"> y <router-link to="/foo/bar">, ambos componentes obtendrían el router-link-active clase cuando el camino es /foo/bar.
router-link-exact-active
Esta clase se aplica automáticamente a la <router-link> componente cuando su ruta de destino es un exacto fósforo. Tenga en cuenta que ambas clases, router-link-active y router-link-exact-active, se aplicará al componente en este caso.
Usando el mismo ejemplo, si tuviéramos <router-link to="/foo"> y <router-link to="/foo/bar">, la router-link-exact-activela clase lo haría solamente ser aplicado a <router-link to="/foo/bar"> cuando el camino es /foo/bar.
El apoyo exacto
Digamos que tenemos <router-link to="https://foroayuda.es/">, lo que sucederá es que este componente estará activo para cada ruta. Puede que esto no sea algo que queramos, por lo que podemos utilizar la exact prop así: <router-link to="https://foroayuda.es/" exact>. Ahora el componente solo obtendrá la clase activa aplicada cuando sea una coincidencia exacta en /.
CSS
Podemos usar estas clases para diseñar nuestro elemento, así:
nav li:hover,
nav li.router-link-active,
nav li.router-link-exact-active {
background-color: indianred;
cursor: pointer;
}
los <router-link> La etiqueta fue cambiada usando el tag apuntalar, <router-link tag="li" />.
Cambiar clases predeterminadas globalmente
Si deseamos cambiar las clases predeterminadas proporcionadas por vue-router globalmente, podemos hacerlo pasando algunas opciones al vue-router instancia así:
const router = new VueRouter({
routes,
linkActiveClass: "active",
linkExactActiveClass: "exact-active",
})
Cambiar clases predeterminadas por instancia de componente (<router-link>)
Si en cambio queremos cambiar las clases predeterminadas por <router-link> y no globalmente, podemos hacerlo usando el active-class y exact-active-class atributos así:
<router-link to="/foo" active-class="active">foo</router-link>
<router-link to="/bar" exact-active-class="exact-active">bar</router-link>
API de ranura en v
Vue Router 3.1.0+ ofrece personalización de bajo nivel a través de una ranura con alcance. Esto es útil cuando deseamos diseñar el elemento contenedor, como un elemento de lista. <li>, pero aún mantiene la lógica de navegación en el elemento de anclaje <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="https://foroayuda.es/href" @click="navigate">{{ route.fullPath }}</a>
</li>
</router-link>
Al crear el enrutador, puede especificar el linkExactActiveClass como una propiedad para establecer la clase que se utilizará para el enlace del enrutador activo.
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.
})
Esto está documentado aquí.
https://router.vuejs.org/en/api/router-link.html agregar atributo activo, por ejemplo:
<ul class="nav navbar-nav">
<router-link tag="li" active-class="active" to="https://foroayuda.es/" 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>