vue.js - vue-router 上的 router-link-active 激活主页路由上的所有哈希链接

Question

我有这个导航可以滚动到主页上的一个部分，除了联系路线。

因为我的联系页面不在同一条路线上，所以我不得不使用滚动行为，所以我可以从联系方式转到主页上的某个部分（否则链接不起作用）。

所以现在我完成了这项工作，我遇到了另一个问题。Router-link-active 类激活主页上所有具有哈希属性的路由。

我该如何绕过这个，我试图删除这些类并点击自定义活动类，但它仍然无法正常工作。

<li><router-link to="/">Home</router-link></li>
<li><router-link :to="{name: 'home', hash: '#about'}">About</router-link></li>
<li><router-link :to="{name: 'home', hash: '#courses'}">Courses</router-link></li>
<li><router-link :to="{name: 'home', hash: '#news'}">News</router-link></li>
<li><router-link :to="{name: 'home', hash: '#business-incubator'}">Business incubator</router-link></li>
<li><router-link :to="{name: 'home', hash: '#team'}">Team</router-link></li>
<li><router-link  to="/contact">Contact</router-link></li>

我知道它会激活所有链接，因为它们都在同一个名称上：'home'，但这是我让滚动工作的唯一方法。因此，如果有更好和正确的方法来做到这一点，请提供帮助。谢谢。

编辑：这是滚动行为代码：

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior: function (to) {
    return new Promise((resolve) => {
      setTimeout(() => {
        if (to.hash) {
          resolve({ el: to.hash, top: 140, behavior: 'smooth',  })
        } else {
          resolve({ top: 0, behavior: 'smooth' })
        }
        
      }, 300)
    })
  }
});

标签： vue.jsvue-router