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

Question

我的网站 https://www.askarya.ir/en，我希望能够只将活动页面导航栏 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