背景:在做vue项目时,发现路由跳转之后,页面默认停留在当前浏览的位置,但是很多时候我们想要的是路由跳转之后,页面重新定位到顶部,下面介绍一下可以实现的方法:

所有页面全部回到顶部
1.全局前置导航守卫进行配置
router.beforeEach((to, from, next) => {    
    // chrome
    document.body.scrollTop = 0
    // firefox
    document.documentElement.scrollTop = 0
    // safari
    window.pageYOffset = 0
    next()
})
2.全局后置导航首位进行配置
// 跳转后返回顶部
 router.afterEach((to,from,next) => {
     window.scrollTo(0,0);
 })
3.scrollBehavior(推荐)
scrollBehavior(to, from, savedPosition) {
    // savedPosition当且仅当通过浏览器的前进/后退按钮触发时才可用
    if (savedPosition) {
      return savedPosition
    }
    return { x: 0, y: 0 }
}
仅需某个页面跳转回顶部

仅需要在当前页面(page)合适的位置加入一下代码即可
1.在组件-前置守卫中

 beforeRouteEnter: function(to, from, next) {
    // chrome
    document.body.scrollTop = 0
    // firefox
    document.documentElement.scrollTop = 0
    // safari
    window.pageYOffset = 0
    next() // 进行路由跳转-> 跳转到当前页面,不调用next函数不会进行路由跳转
  },

2.在created函数中

created(){
  // chrome
  document.body.scrollTop = 0
  // firefox
  document.documentElement.scrollTop = 0
  // safari
  window.pageYOffset = 0
}
Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐