Vue 路由器 v3.x
这是一个有点老的问题,OP几乎肯定已经找到了解决方案,但对于遇到这个问题的任何人来说,这应该可以解决问题:
<router-link :to="{ name: 'Homepage', hash: '#enter' }">Enter</router-link>
<router-link :to="{ name: 'Homepage', hash: '#prizes' }">Prizes</router-link>
<router-link :to="{ name: 'Homepage', hash: '#faqs' }">FAQ</router-link>
<router-link :to="{ name: 'Contact' }">Contact</router-link>
这应该允许您从其他视图/组件访问这些链接,并且单击时会将您重定向到指定的路线(在本例中为主页),并滚动到指定的哈希(#enter、#prizes、#faqs)。
除了问题中的路由器代码片段之外,您还可以使用本机添加平滑滚动window.scrollTo
method:
export default new Router({
routes: [],
mode: 'history',
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return window.scrollTo({
top: document.querySelector(to.hash).offsetTop,
behavior: 'smooth'
})
} else {
return { x: 0, y: 0 }
}
}
})
Vue Router v4.x 更新
你写你的router-link
是一样的,但是您现在可以将滚动行为和元素选择编写得更整洁一些。来自文档 https://next.router.vuejs.org/guide/advanced/scroll-behavior.html#scroll-behavior
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
if (to.hash) {
return {
el: to.hash,
behavior: 'smooth'
}
}
}
})