在setTimeout之后，Vue.js滚动到新页面路径的顶部
在setTimeout之后，Vue.js滚动到新页面路径的顶部
提问于 2017-03-02 01:40:55
我有一个页面转换，当滚动到新路线的顶部时，它不能很好地工作。我想在它自动滚动到顶部之前等待100ms。下面的代码根本不会滚动。有没有办法做到这一点？
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home
}
],
scrollBehavior (to, from, savedPosition) {
setTimeout(() => {
return { x: 0, y: 0 }
}, 100);
}
})回答 3
Stack Overflow用户
发布于 2017-11-07 18:13:19
如果您希望在每条路由上都执行此操作，则可以在路由器的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();
});Stack Overflow用户
发布于 2020-05-18 02:11:47
如果您想等待很长时间，请使用scrollBehaviour的异步滚动，如下所示：
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'
});Stack Overflow用户
发布于 2017-03-02 07:00:35
这可能不是最好的方法，但是添加
document.body.scrollTop = document.documentElement.scrollTop = 0;
在路由的核心组件(在本例中为Home)中，mounted()函数实现了我想要的功能。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42538449
复制相关文章
相似问题