Почему проблема с router-link-active?

Question

[myskypesla]

Делаю инициализацию проекта с помощью vue init webpack my-project.

Делаю горизонтальное меню и в нём прописываю:

<router-link to="/"></router-link>
<router-link to="/about"></router-link>
<router-link to="/team"></router-link>
<router-link to="/contacts"></router-link>

И хочу выделить активный пункт меню подчёркиванием, но при переключении между маршрутами, активным становится новый пункт по которому я кликнул, и также самый первый тоже остаётся активным, т.е. у 2-ух пунктов меню остаётся class="router-link-active".

Кто-нибудь сталкивался? Как решить?

Answer 1

[Artem0071]

В первом в теге после to="/" написать exact
У вас все пункты содкржат "/", поэтому перый выделяется вместе с остальными

Comments

[myskypesla]

Спасибо большое!

Answer 2

[Evgeny Kulakov]

Можно просто имхо убрать косую черту для первого маршрута.

Comments

[myskypesla]

и никуда не переходить?

[Evgeny Kulakov]

Точно) Заработался, думал речь о самом роутере, я не о ссылках.

[myskypesla]

Evgeny Kulakov Artem0071 подскажите, а как сделать анимацию появления одного слова в тексте, если нажимаешь на router-link? Т.е. я перехожу между маршрутами и чтобы изначально слово было скрыто, а как только перешёл оно только одно начало появляться?

[Evgeny Kulakov]

myskypesla: Обернуть слово в <transition appear>.

[myskypesla]

Evgeny Kulakov только что нашёл это :) но спасибо за ответ!