Javascript Nuxt.js导航活动类的问题

大家早上好！ 我正在寻找解决这个问题的方法，但我还没有找到。这是Nuxt.js导航，带有活动类的定制，“理论上”应该根据活动链接进行更改。 如果为颜色指定了颜色，则会发生这种情况

ul {
    display: flex;
    justify-content: center;
    li {
        list-style: none;
        padding: 1.4rem;
        color: white;
        a {
            padding: 1rem;
            text-decoration: none;
            text-transform: uppercase;
            color: $color1;
        }
    }
}
.exact-active-link {
    color: red;
}

这是我的导航HTML（如果删除，主页将与目标页面一起激活）：

我如何解决这个问题（我习惯于使用Vue.js，但从未遇到过这种问题）

  <ul>
      <li><nuxt-link to="/" exact>Home</nuxt-link></li>
      <li><nuxt-link to="/about" exact>About</nuxt-link></li>
      <li><nuxt-link to="/contact" exact>Contact</nuxt-link></li>
      <li><nuxt-link to="/login" exact>Login</nuxt-link></li>
      <li><nuxt-link to="/register" exact>Register</nuxt-link></li>
  </ul>

  router: {
    linkActiveClass: "active-link",
    linkExactActiveClass: "exact-active-link"
  }