Vue.js

Question

正如标题所暗示的那样，我试图在每个菜单项处于活动状态时为其赋予不同的颜色。我试图通过遵循这两个代码示例来实现这一点

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

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

但我很挣扎，因为在这些示例中，他们使用的是 for 循环。所以我尝试调整代码，但对我来说并不奏效。

你可以在这里找到我的代码 -> 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

如果你需要严格使用 vue：

为每个 link 添加事件并绑定 class，例如：

 <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: ''

或者例如，如果您希望仪表板 link 在您打开页面时处于活动状态：

isActive: 'dashboard'

然后你定义活动样式：

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

这只是一个示例，您可以将class绑定到您需要的元素上，并根据需要设置活动class。

Answer 2

所以我终于让它工作了，但是以一种非常简单的方式，无需绑定和单击....

所以解决方案只是将您选择的 css class 添加到路由器 link 并且当 link 处于活动状态时它已经具有 . router-link-exact-active class 然后只需添加 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
 }

Vue.js - 如何为活动菜单 link 赋予动态颜色

Vue.js - How to give the active menu link a dynamic colour

tailwind-css