Question

我的网站是https://www.askarya.ir/en，我希望能够只将活动页面navbar li涂成红色。

 <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

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

1 个答案: