vue 组件的 scrollBehavior-滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

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

 在文档页面(http://localhost:8080/document)拉动滚动条，然后刷新浏览器会发现滚动条依然在原来的位置，这是浏览器的默认行为，会记录浏览器滚动条默认位置。

        但是点击浏览器“前进/后退”按钮，会发现当初那个页面的滚动条从0开始了，没有记录上一次滚动条的位置。现在要求点击浏览器“前进/后退”按钮，页面滚动条要记录上一次的位置，这时需要设置它的的滚动行为。

        这时候需要在路由配置中设置 scrollBehavior(to,from,savePosition)函数，函数有三个参数。scrollBehavior() 函数在点击浏览器的“前进/后退”，或者切换导航的时候触发。

使用方法：
const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})
scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”，或者切换导航的时候触发。
    console.log(to) // to：要进入的目标路由对象，到哪里去
    console.log(from) // from：离开的路由对象，哪里来
    console.log(savePosition) // savePosition：会记录滚动条的坐标，点击前进/后退的时候记录值{x:?,y:?}
  }

index.js

import Vue from 'vue'
import Router from 'vue-router'
import { scrollBehavior } from './utils'
Vue.use(Router)
const router = new Router({
  mode: 'history',
  scrollBehavior,
  routes: [
  ...routesPC,
  ...routesMO
  ]
})
export default router
   scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
在该方法内，可以通过判断路由to,from两个对象来做一些必要的判断；
savedPosition 参数是记录的上次滚动的位置；
通过return {x:number,y:number}来控制页面滚动的位置；

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

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}
想要在后退时，滚动到上次滚动的位置，如果满足条件，savedPosition有值的情况下：

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}
新增情况：异步滚动
当页面数据需要请求加载有延迟的情况下，页面如果直接滚动，会出现滚动后，页面数据请求回来，DOM重新渲染，滚动失效的情况；
所以官方文档给补充了异步滚动的方法：

scrollBehavior (to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ x: 0, y: 0 })
    }, 500)
  })
}
这个会在返回后，有一定延迟再滚动，可以根据自己项目的具体情况进行一定修改，兼容；

注：我的项目mobile端数据加载使用的是vue-mugen-scroll滑动加载数据组件，网上没找到能触发它加载的方法，所以，在返回列表页后，数据刷新，只有一页数据，滚动到底，也找不到上次的数据，所以还是没有解决我的问题，但是这个方法是很好的，只是使用情况，会有限制，记录一下，以备后用。

 
————————————————
版权声明：本文为CSDN博主「sunlizhen」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sunlizhen/article/details/106220798