路由跳转，滚动条问题

来源：9-10 【学习任务】完成文章详情页的编码

ForCoke

2023-03-10

老师，我在路由中配置了滚动条行为：

const router = createRouter({
  history: createWebHistory(),
  routes: [...],
  // 滚动行为
  scrollBehavior() {
    // 始终滚动到顶部
    return { top: 0 };
  },
});

在这种情况下，每次我的路由跳转，都是能够回到页面最顶端的。但是这个过程像是有过渡一样，滚动条是从上一个页面的滚动位置回到最顶端的，也就是可以看见新页面是从底部的某个位置回到最顶端。
但是我希望，跳转路由进去新页面时，我的滚动条是能够很快速的回到最顶端，或者说没有这个页面结构随着滚动条从下往上到达最顶端的过程，而是直接就在最顶端，我该如何做？

写回答

1回答

张轩

2023-03-11

已采纳

同学你好

找了半天，找到了答案，你可以试试看：

// 加在根组件上
onMounted(() => {
    document.documentElement.style.scrollBehavior = 'auto';
})

这样就没有滚动的效果了

ForCoke

感谢老师回答，辛苦您了！！

2023-03-12

共1条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目，率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程

相似问题

路由跳转问题

回答 1

vue-router路由跳转失败

回答 2

路由传参问题

回答 2

关于vue的路由守卫问题

回答 1

路由跳转问题

回答 1

打开慕课网App查看更多内容