Как VueJS маршрутизатор-ссылка активный стиль

Моя страница в настоящее время имеет навигацию.компонент вю. Я хочу сделать каждую навигацию hover и active. "Hover" работает, но "active" - нет.

Вот как работает навигация.файл 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>

и следующий стиль.

<style>

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

</style>

вот как hover выглядит сейчас и ожидается точно так же на active. This is how hover looks like now and expected exactly same on active.

Я был бы признателен, если бы вы дали мне совет по стилизации маршрутизатора-ссылка активна завод. Спасибо.

18
routerlink vue-router vue.js

3 ответов

:active pseudo-class !== .active class

на :активный псевдо-класс не то же самое, что добавление класса для стиля элемента.

: активный псевдокласс CSS представляет элемент (например, кнопку) это активируется пользователем. При использовании мыши "активация" обычно начинается, когда кнопка мыши нажата и заканчивается, когда он освобожден.

то, что мы ищем-это класс, такие как .active, который мы можем стиль элемента навигации.

для более ясного примера разницы между :active и .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-Маршрутизатор

vue-router автоматически применяет два активных классов, .router-link-active и .router-link-exact-active до <router-link> компонент.

router-link-active

этот класс применяется автоматически к <router-link> компонент, когда его целевой маршрут согласован.

как это работает, используя инклюзивное поведение соответствия. Например, <router-link to="/foo"> будет применяться этот класс, пока текущий путь начинается с /foo/ или /foo.

Итак, если бы мы имели <router-link to="/foo"> и <router-link to="/foo/bar">, оба компонента получат router-link-active класс, когда путь /foo/bar.

router-link-exact-active

этот класс автоматически применяется к <router-link> компонент, когда его цель маршрута-это точно матч. Примите во внимание, что оба класса, router-link-active и router-link-exact-active, будет применяться к компоненту в этом случае.

используя тот же пример, если бы у нас было <router-link to="/foo"> и <router-link to="/foo/bar">, the router-link-exact-activeкласс только применяется к <router-link to="/foo/bar"> когда путь /foo/bar.

точная опора

допустим, у нас есть <router-link to="/">, произойдет то, что этот компонент будет активен для каждого маршрута. Это может быть не то, что мы хотим, поэтому мы можем использовать exact prop так:<router-link to="/" exact>. Теперь компонент будет применять активный класс только тогда, когда он точно соответствует /.

в CSS

мы можем использовать эти классы для стиля нашего элемента, например:

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

на <router-link> тег был изменен с помощью tag проп <router-link tag="li" />.

изменить классы по умолчанию глобально

если мы хотим изменить классы по умолчанию vue-router глобально мы можем сделать это, передав некоторые параметры в vue-router например вот так:

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

изменить классы по умолчанию для каждого экземпляра компонента (<router-link>)

если вместо этого мы хотим изменить классы по умолчанию в <router-link> и не глобально, мы можем сделать это с помощью active-class и exact-active-class атрибуты, как так:

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

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

при создании маршрутизатора можно указать linkExactActiveClass как свойство для установки класса, который будет использоваться для активной ссылки маршрутизатора.

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

Это документировано здесь.

13

https://router.vuejs.org/en/api/router-link.html добавить атрибут active-class= " active" например:

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