Vue2 VueRouter 路由滚动

Question

注意： 这个功能只在支持 history.pushState 的浏览器中可用

第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用

返回值：

• { x: number, y: number }
• { selector: string, offset? : { x: number, y: number }}
• 若返回一个 falsy 的值，或者是一个空对象，那么不会发生滚动
• 返回 savedPosition

  const router = new VueRouter({
      routes:[..],
      scrollBehavior(to, from, savedPosition){
          // return 期望滚动到哪个位置
          if(savedPosition){
              return savedPosition'
          }else{
              return { x:0,y:0 }
          }
      }
  })
  

• 滚动到锚点

  const router = new VueRouter({
      routes:[..],
      scrollBehavior(to, from, savedPosition){
          if(to.hash){
              return {
                  selector: to.hash
              }
          }
      }
  })
  

• 利用路由元 meta 信息更细颗粒度地控制滚动： 路由滚动例子

异步滚动

返回一个 Promise 来得出预期的位置描述：

将其挂载到从页面级别的过渡组件的事件上，令其滚动行为和页面过渡一起良好运行是可能的。但是考虑到用例的多样性和复杂性，我们仅提供这个原始的接口，以支持不同用户场景的具体实现

const router = new VueRouter({
    routes:[..],
    scrollBehavior(to, from, savedPosition){
        return new Promise((resolve, reject) => {
            setTimeout(()=>{
                resolve({x:0,y:0})
            }, 500)
        })
    }
})