Компонент vuejs <router-link> сохраняет ссылку на корневой путь всегда активной

Question

У меня такая навигация

<nav>
    <ul class="nav nav-list">
         <router-link tag="li" to="/"><a href="#">Home</a></router-link>
         <router-link tag="li" to="/page1"><a href="#">Page1</a></router-link>
         <router-link tag="li" to="/page2"><a href="#">Page2</a></router-link>
    </ul>
</nav>

Я хочу, чтобы ссылка на Page1 была активной, когда я нахожусь на странице1, и то же самое для страницы2. Работает нормально, ссылки активируются при переходе на страницы, НО проблема в том, что ссылаться на рут (/) страница всегда активна, даже когда я покидаю страницу.

Answer 1

Корневая ссылка всегда активна, потому что Vue Router частично совпадает с корневым / путь с текущим путем.

Чтобы выполнить точное совпадение, вы можете:

1. Добавить exact приписать router-link:

   <router-link tag="li" to="/" exact>
       <a href="#">
           Home
       </a>
   </router-link>
   

2. Установите свой активный класс в linkExactActiveClass опция конструктора маршрутизатора вместо linkActiveClass,