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

f0ofjuux  于 2023-03-09  发布在  Vue.js
关注(0)|答案(1)|浏览(183)

我有这个导航滚动到主页上的一节,除了联系路线。
因为我的联系人页面不在同一条路线上,所以我不得不使用滚动行为,这样我就可以从联系人页面转到主页上的某个部分(否则链接就不起作用了)。
所以现在我做的工作,我有另一个问题。路由器链接活动类激活所有的路由与散列属性是在主页上。
我怎么能绕过这一点,我曾试图删除这个类,并使自定义活动类点击,但它仍然不工作。

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

vc9ivgsu1#

我向router-link-activerouter-link-exact-active类添加了:focus伪类

li.router-link-active:focus,
li.router-link-exact-active:focus

相关问题