好处

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

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 }
    }
  }
})
Logo

前往低代码交流专区

更多推荐