欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-18 08:29:40
...

要解决的问题

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

 

代码

方式一: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