Vue. js - Как придать активной ссылке меню динамический цвет c

Question

Итак, как подсказывает заголовок, я пытаюсь дать каждому пункту меню свой цвет, когда он активен. Я пытался добиться этого, следуя этим двум примерам кода

1 -> https://codepen.io/Ranushka/pen/KKPBYQv

2 -> https://codepen.io/Ranushka/pen/ZEzjdrO

Но я борюсь, потому что в этих примерах они работают с a для l oop. Поэтому я попытался изменить код, но у меня ничего не вышло.

Мой код можно найти здесь -> https://codepen.io/GY22/pen/vYNeOvQ

       <nav class="nav bg-darkGrey fixed w-full z-10 top-0 shadow">
             <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto lg:block mt-2 lg:mt-0 bg-darkGrey z-20">
       <ul class="list-reset lg:flex flex-1 items-center px-4 md:px-0">
         <li class="mr-6 my-2 md:my-0">
           <router-link :to="/page1" class="block py-1 md:py-3 pl-1 align-middle text-grey-900 no-underline   
              hover:text-red-800 border-b-4 border-gray-900 hover:border-red-800">
              <i class="fas fa-th-large fa-fw mr-3"></i>
              <span class="pb-1 md:pb-0 text-sm uppercase">Dashboard</span>
            </router-link>
         </li>

         <li class="mr-6 my-2 md:my-0">
           <router-link :to="/page2" class="block py-1 md:py-3 pl-1 align-middle text-grey-900 no-underline     
              hover:text-blue-400 border-b-4 border-gray-900 hover:border-blue-400">
              <i class="fas fa-th-large fa-fw mr-3"></i>
              <span class="pb-1 md:pb-0 text-sm uppercase">Users</span>
            </router-link>
         </li>

         <li class="mr-6 my-2 md:my-0">
           <router-link :to="/page3" class="block py-1 md:py-3 pl-1 align-middle text-grey-900 no-underline   
              hover:text-pink-400 border-b-4 border-gray-900 hover:border-pink-400">
              <i class="fas fa-th-large fa-fw mr-3"></i>
              <span class="pb-1 md:pb-0 text-sm uppercase">Posts</span>
            </router-link>
         </li>
       </ul>  
    </div>
        </nav>

Вот что Я пытаюсь достичь

Я надеюсь, что кто-то может направить меня в правильном направлении направление. Заранее спасибо

Answer 1

так что я наконец-то заставил его работать, но очень простым способом без привязки и щелчка ....

, поэтому решение состоит в том, чтобы просто добавить класс css по вашему выбору к ссылке маршрутизатора и увидеть например, когда ссылка активна, у нее уже есть класс .router-link-точно-active, а затем просто добавьте стиль css

, чтобы код был таким:

  <router-link class="menuItem-active-link" :to="{name: 'dashboard'}">Dashboard</router-link>

 .router-link-exact-active.menuItem-active-link{
    border-bottom-color: #F19238;
    color:#F19238
 }

Answer 2

Если вам нужно сделать это с использованием строго vue:

Добавить событие и класс привязки для каждой ссылки, например:

 <router-link @click.native="isActive = 'dashboard'" :to="/page1" class="block py-1 md:py-3 pl-1 align-middle text-grey-900 no-underline  hover:text-red-800 border-b-4 border-gray-900 hover:border-red-800" v-bind:class="{ active: isActive == 'dashboard'" }>

Панель инструментов

Тогда в данных вы определяете:

isActive: ''

или, например, если вы хотите, чтобы ссылка на панель мониторинга была активной при открытии страницы:

isActive: 'dashboard'

Затем вы определяете активный стиль:

<style>
.active {
color: green;
}
</style>

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