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方法接收 tofrom 路由对象。第三个参数 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, /* 产品详情 */
                },
            ]
        }
    ]
})
posted @ 2018-07-23 15:48 桃之夭夭~ 阅读(...) 评论(...) 编辑 收藏