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

Наразі моя сторінка містить компонент 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>

Ось так виглядає наведення зараз і очікується точно так само на активному.

Буду вдячний, якщо ви дасте мені пораду щодо стилізації активних робіт маршрутизатора. Дякую.

: Активний псевдо-клас не те ж саме , як додавання класу стилю елемента.

Псевдо-клас 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-Router

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">, router-link-exact-activeклас застосовувався б лише тоді, <router-link to="/foo/bar">коли шлях є /foo/bar.

Точна опора

Скажімо, маємо <router-link to="/">, що станеться так, що цей компонент буде активним для кожного маршруту. Це не може бути те , що ми хочемо, щоб ми могли використовувати exactопору так: <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-classand 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>

API v-slot

Vue Router 3.1.0+ пропонує низький рівень налаштування за допомогою слота з масштабом . Це зручно, коли ми хочемо стилізувати елемент-обгортку, як елемент списку <li>, але при цьому зберегти логіку навігації в елементі прив'язки <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="href" @click="navigate">{{ route.fullPath }}</a>
  </li>
</router-link>

Під час створення маршрутизатора ви можете вказати 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.
})

Це задокументовано тут .

https://router.vuejs.org/en/api/router-link.html add attribute 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>

Як уже згадувалося вище, @Ricky вю-маршрутизатор автоматично застосовує дві активні класи, .router-link-activeі .router-link-exact-active, до компоненту.

Отже, щоб змінити активне посилання css використовуйте:

.router-link-exact-active{
 //your desired design when link is clicked
font-weight: 700;
}

Просто додайте рішення @ Bert, щоб зробити його більш зрозумілим:

    const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes,
  linkExactActiveClass: "active" // active class for *exact* links.
})

Як бачимо, цей рядок слід видалити:

linkActiveClass: "active", // active class for non-exact links.

таким чином, ТІЛЬКИ поточне посилання підсвічується. Це має стосуватися більшості випадків.

Девід