Vue Router滚动行为 scrollBehavior

滚动行为

使用前端路由，当切换到新路由时，想要页面滚动到顶部或者是保持原先的滚动位置，就像重新加载页面那样。

vue-router能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

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

当创建一个Router实例，你可以提供一个scrollBehavior方法

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    // to:要进入的目标路由对象，到哪里去ss
    console.log(to)
    // from:离开的路由对象，从哪儿来
    console.log(from)
    // savedPosition: 会记录滚动条的坐标，点击"后退/前进" 时的记录值(x:?,y:?)
    console.log(savedPosition)
  }
})

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

该方法返回滚动位置信息，如下所示：

• { x: number, y: number }
• { selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

如果返回一个falsy值（falsy不是false，参考文档），或者是一个空对象，那么不会发生滚动。

举例：

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

对于所有路由导航，简单的让页面滚动到顶部。

返回 savePosition ，在按下 后退/前进 按钮时，就会像浏览器的原生表现那样：

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

如果你要模拟“滚动到锚点”的行为：

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

还可以利用路由元信息更细颗粒度的控制滚动。详细例子请移步这里。

异步滚动

2.8.0 新增

scrollBehavior (to,from,savedPosition) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({x:0,y:0})
        },500)
    })
}

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

具体实现例子

const HomePage = () => import('@/page/homePage/HomePage-2.0'); /* 首页 */

const ProductDetail = () => import('@/page/serviceProvider/ProductDetail'); /* 主要产品详情 */

const scrollBehavior = (to, from, savedPosition) => {
    let returnData = {}
    if(savedPosition){
        returnData = savedPosition
    }
    else{
        returnData.x = 0
        returnData.y = 0
    }
    return returnData
}

export default new Router({
    mode: 'history',
    scrollBehavior,
    routes: [
        {
           path: '/',
           name: 'HomePage',
           component: HomePage, /* 首页 */
           children: [
                {
                    path: '/ProductDetail',
                    name: 'ProductDetail',
                    component: ProductDetail, /* 产品详情 */
                },
            ]
        }
    ]
})