vue.js - link - vue router set

Cómo VueJS router-link active style

Question

Mi página tiene actualmente el componente Navigation.vue. Quiero hacer el desplazamiento de cada navegación y activo. El ''desplazamiento'' funciona pero ''activo'' no lo hace.

Así es como se ve el archivo 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>

Y el siguiente es el estilo.

<style>

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

</style>

Así es como se ve Hover ahora y se espera exactamente igual en activo.

Le agradecería que me diera un consejo para el diseño de trabajos de enrutador-enlace activo. Gracias.

Answer 1

:active pseudo-class !== .active class

La pseudo-clase: activa no es lo mismo que agregar una clase para darle estilo al elemento.

La pseudo-clase CSS activa representa un elemento (como un botón) que está siendo activado por el usuario. Cuando se usa un mouse, la "activación" normalmente comienza cuando se presiona el botón del mouse y termina cuando se suelta.

Lo que estamos buscando es una clase, como .active , que podamos usar para .active el elemento de navegación.

Para ver un ejemplo más claro de la diferencia entre :active y .active consulte el siguiente fragmento de .active :

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 aplica automáticamente dos clases activas, .router-link-active y .router-link-exact-active , al componente <router-link> .

router-link-active

Esta clase se aplica automáticamente al componente <router-link> cuando su ruta de destino coincide.

La forma en que esto funciona es mediante el uso de un comportamiento de coincidencia inclusiva. Por ejemplo, <router-link to="/foo"> aplicará esta clase siempre que la ruta actual comience con /foo/ o sea /foo .

Entonces, si tuviéramos <router-link to="/foo"> y <router-link to="/foo/bar"> , ambos componentes obtendrían la clase router-link-active cuando la ruta es /foo/bar .

router-link-exact-active

Esta clase se aplica automáticamente al componente <router-link> cuando su ruta objetivo es una coincidencia exacta . Tenga en cuenta que ambas clases, router-link-active y router-link-exact-active , se aplicarán al componente en este caso.

Usando el mismo ejemplo, si tuviéramos <router-link to="/foo"> y <router-link to="/foo/bar"> , la clase router-link-exact-active solo se aplicaría a <router-link to="/foo/bar"> cuando la ruta es /foo/bar .

El prop exacto

Digamos que tenemos <router-link to="/"> , lo que sucederá es que este componente estará activo para cada ruta. Es posible que esto no sea algo que queramos, por lo que podemos usar el prop exact así: <router-link to="/" exact> . Ahora el componente solo obtendrá la clase activa aplicada cuando sea una coincidencia exacta en / .

CSS

Podemos usar estas clases para estilizar nuestro elemento, así:

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

La etiqueta <router-link> se cambió usando la tag prop, <router-link tag="li" /> .

Cambiar clases predeterminadas globalmente

Si deseamos cambiar las clases predeterminadas proporcionadas por vue-router globalmente, podemos hacerlo pasando algunas opciones a la instancia de vue-router así:

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

Cambiar las clases predeterminadas por instancia de componente ( <router-link> )

Si, por el contrario, queremos cambiar las clases predeterminadas por <router-link> y no globalmente, podemos hacerlo usando los atributos de router-link-exact-active manera:

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

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

Answer 2

Cuando está creando 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 router.vuejs.org/en/api/options.html#linkexactactiveclass .

Answer 3

https://router.vuejs.org/en/api/router-link.html agregar atributo active-class = "active", por ejemplo:

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