页面更改时，Vue.js 活动菜单颜色不会禁用

Question

我的网站是https://www.askarya.ir/en，我希望能够仅将活动页面导航栏设为红色。

 <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;
}

目前，即使在不同的页面上，主页导航项也始终亮起，我怎么能只亮起活动页面导航项。

谢谢

Answer 1

将精确添加到您的路由器链接。这应该可以解决您的问题

<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