业务逻辑_vue路由跳转时定位到页面顶部

背景：在做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
}