如何使用路由器链接滚动到特定锚点？

Question

我正在尝试使用 vue js 开发一个简单的网站，到目前为止一切顺利，但我面临以下问题：

我正在使用路由器来更改页面，它可以工作，但我需要做的是：更改页面并滚动到特定锚点。

我已经尝试过的：

效果很好： 前往联系页面或主页的路线

<router-link to="/contact">Contact</router-link>
<router-link to="/">Home</router-link>

不起作用：

<router-link :to="{ name: '/', hash: '#technology' }" >Technology</router-link>

最后一个仅在我位于主页时才有效，但每当我更改为“联系页面”并尝试路由到“/#technology”时，它就不起作用。它确实尝试路由到“http://example.com/contact/#technology”而不是“http://example.com/#technology”。

如果我这样做，它只会滚动到顶部，但不会滚动到锚点：

<router-link to="/#technology" Technology</router-link>

我的路由器代码：

const routes = [
    { path: '/', component: Home },
{ path: '/contact', component: Contact }
]

const router = new VueRouter({
     mode: 'history',

     routes,
       scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition;

        }

         if (to.hash) {
            return { selector: to.hash };
        }
    return { x: 0, y: 0 }
  },


});

new Vue({
    router,
}).$mount('#app');

模板看起来像这样（我确实删除了不必要的代码）：

<template id="home">
<div>
Home
<div id="technology"> <!-- IT SHOULD SCROLL TO HERE -->
</div>
</template>

<template id="contact">
<div>
Contact Page
</div>
</template>

Answer 1

我认为你走在正确的道路上。

但也许你误会了路线

name

和

path

的用法。

而不是

<router-link :to="{ name: '/', hash: '#technology' }" >Technology</router-link>

尝试使用

path

而不是

name

<router-link :to="{ path: '/', hash: '#technology' }" >Technology</router-link>

Answer 2

使用 Vue 3 + Vue-Router 4，这对我有用：

if (to.hash) {
  return {
    el: to.hash,
    top: 20
  };
}

将其放在

scrollBehavior

函数的顶部。

20

是一个偏移量，如果将其设置为

0

，它将位于具有ID的元素的右侧，如果将其设置为

300

，则该元素将在可见区域顶部下方300像素处可见.