Как активировать стиль VueJS router-link

В моей странице в настоящее время имеется компонент Navigation.vue. Я хочу, чтобы каждый навигация и активный навигация. "Наведение" работает, но "активный" - нет.

Вот как выглядит файл 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>

И вот стиль.

<style>

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

</style>

Вот как выглядит зависание сейчас и ожидалось точно так же в активном режиме.

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

Ответы

Ответ 1

Псевдокласс: active - это не то же самое, что добавление класса для стилизации элемента.

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

Мы ищем класс, например .active, который мы можем использовать для .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>

Ответ 2

Когда вы создаете маршрутизатор, вы можете указать 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.
})

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

Ответ 3

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>