Vue笔记4.1 : 路由 scrollBehavior 属性

//代码片段
export default new Router({
    mode: 'history', // 去掉url中的#
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes
})

好处
当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置

scrollBehavior (to, from, savedPosition) {
   // return 期望滚动到哪个的位置
}

参数说明：
to, from都是路由对象；
savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

案例使用
场景：项目中经常会遇到异步请求接口数据，这些异步操作通常会放在created、mounted钩子里面
分析：通过在不同的生命周期钩子和scrollBehavior()使用console.log()打印顺序如下：

created钩子
mounted钩子
to参数: {***} from参数: {***}
异步请求数据：get data
打印位置信息 savedPosition {x: 0, y: 630}

可知：必须使用异步滚动，否则，请求的数据重新赋值，将导致页面重新渲染，因此利用setTimeout将回调事件放到队列中，且异步请求接口的回调事件优先进入队列，最后才是setTimeout的回调事件。

完整代码如下

const router = new Router({
  mode: 'history',
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    console.log('to: ', to)
    console.log('from: ', from)
    if (savedPosition) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log('savedPosition', savedPosition)
          resolve(savedPosition)
        }, 500)
      })
    } else {
      return { x: 0, y: 0 }
    }
  }
})

转载:https://blog.csdn.net/zxj0904010228/article/details/106504475