VUE项目-实现页面跳转后回到顶部，退回历史页面回到历史位置

• 全局路由导航-跳转新页面时，页面置顶
• 实现页面跳转后回到顶部，退回历史页面回到历史位置

官方文档 滚动行为

• 思路：利用全局导航守卫

（推荐）方法一：跳转页面，页面顶置，回退页面时，页面回退至相应位置

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

const router = new VueRouter({
  routes,
  //scrollBehavior 函数接收 to和 from 路由对象，如 Navigation Guards。
  //第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      //此处意思 即若回退页面，返回savedPosition，且页面不置顶
      return savedPosition
    } else {
      //此处意思 若页面跳转新页面，则页面置顶
      return { x: 0, y: 0 ,behavior:'smooth'}
    }
  }
})

方法二：(退回页面，不会记录历史位置)

  router.beforeEach((to,from,next) => {
  window.scrollTo({
    top:0,
    behavior:'smooth'
  })
  next()
})