当滚动到新路线的顶部时,我的页面转换效果不佳。我想在它自动滚动到顶部之前等待100ms。以下代码根本不会滚动。有没有办法做到这一点?
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home
}
],
scrollBehavior (to, from, savedPosition) {
setTimeout(() => {
return { x: 0, y: 0 }
}, 100);
}
})
答案 0 :(得分:32)
现在 Vue 原生支持,使用scrollBehaviour
,如下所示:
export default new Router({
scrollBehavior() {
return { x: 0, y: 0 };
},
routes: [
{
path: '/',
name: 'Home',
component: Home
}
],
mode: 'history'
});
答案 1 :(得分:11)
其他答案无法处理诸如以下的极端情况:
http://example.com/foo#bar
应该导航到页面上元素为id
的{{1}}。以下是处理以上所有内容的示例代码:
bar
答案 2 :(得分:9)
如果您希望在每条路线上都能实现这一点,您可以在路由器的hook之前执行此操作:
const router = new VueRouter({ ... })
router.beforeEach(function (to, from, next) {
setTimeout(() => {
window.scrollTo(0, 0);
}, 100);
next();
});
如果您使用的是较旧版本的vue-router,请使用:
router.beforeEach(function (transition) {
setTimeout(() => {
window.scrollTo(0, 0);
}, 100);
transition.next();
});
答案 3 :(得分:1)
在使用客户端路由时,我们可能希望在导航到新路由时滚动到顶部,或者保留历史条目的滚动位置,就像真实页面重新加载一样。通过vue-router,您可以实现这些目标,甚至更好,还可以完全自定义路线导航中的滚动行为。
注意:此功能仅在浏览器支持的情况下有效 history.pushState
。
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
已保存位置:
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
答案 4 :(得分:0)
如果要等待很长时间,请使用export default new Router({
scrollBehavior() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ x: 0, y: 0 })
}, 100)
})
},
routes: [
{
path: '/',
name: 'Home',
component: Home
}
],
mode: 'history'
});
的异步滚动,如下所示:
url
答案 5 :(得分:-1)
这可能不是最好的方法,但添加
document.body.scrollTop = document.documentElement.scrollTop = 0;
在路线的核心组件中(在这种情况下,Home
)mounted()
功能达到我想要的效果。