Цвет активного меню Vue.js не отключается при изменении страницы - PullRequest
Новая
       42

Цвет активного меню Vue.js не отключается при изменении страницы

0 голосов
/ 05 октября 2018

Мой сайт https://www.askarya.ir/en, и я хотел бы иметь возможность иметь только активную страницу navbar li красного цвета. 

 <div class="navigation-items">
    <ul class="nav-list">
      <li class="nav-item"><nuxt-link to="/en" class="nav-link">Home</nuxt-link></li>
      <li class="nav-item"><nuxt-link to="/en/about" class="nav-link">About Us</nuxt-link></li>
      <li class="nav-item"><nuxt-link to="/en/courses" class="nav-link">Courses</nuxt-link></li>
      <li class="nav-item"><nuxt-link to="/en/meetups" class="nav-link">Meetups</nuxt-link></li>
      <li class="nav-item"><nuxt-link to="/en/contact" class="nav-link">Contact Us</nuxt-link></li>           
    </ul>
  </div>

и соответствующий CSS 

.nav-item a:hover,
.nav-item a:active,
.nav-item a.nuxt-link-active {
  color: red;
}

В данный момент элемент навигации на главной странице всегда подсвечивается, даже если на другой странице я могу подсветить только элемент навигации активной страницы.

Спасибо

1 Ответ

0 голосов
/ 05 октября 2018

Добавьте точную к вашей ссылке маршрутизатора.Это должно решить вашу проблему 

<li class="nav-item"><nuxt-link to="/en" exact class="nav-link">Home</nuxt-link></li>

Здесь вы найдете все атрибуты, которые вы можете использовать для <nuxt-link>: https://router.vuejs.org/en/api/router-link.html

...