Vue项目开发笔记1——vue路由跳转时定位在页面顶部

最新推荐文章于 2024-03-26 11:08:17 发布

转载最新推荐文章于 2024-03-26 11:08:17 发布 · 332 阅读

前端-Vue 专栏收录该内容

4 篇文章

订阅专栏

博客旨在解决路由跳转时新页面定位问题，当路由跳转进入新页面，位置常停留在上个页面浏览处，期望每次进入新页面定位在顶部。文中给出了在 main.js 和 router - index.js 两种方式下的解决代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要解决的问题

路由跳转时进入新的页面，但位置却不在顶部，而是在上个页面浏览的位置，在每次进入新页面时，想让它定位在页面的顶部。

代码

方式一：main.js

router.beforeEach((to, from, next) => {    
    // chrome
    document.body.scrollTop = 0
    // firefox
    document.documentElement.scrollTop = 0
    // safari
    window.pageYOffset = 0
    next()
})

方式二：router-index.js

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    return { x: 0, y: 0 }
  }
})

转载自：https://www.jianshu.com/p/950c673bcff9