Vue scrollBehavior 滚动行为

原文https://www.cnblogs.com/sophie_wang/p/7880261.html

https://blog.csdn.net/wandoumm/article/details/80270865

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

注意: 这个功能只在 HTML5 history 模式下可用。

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

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

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

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

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

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

我们还可以利用路由元信息更细颗粒度地控制滚动。查看完整例子：

const scrollBehavior = (to, from, savedPosition) => {
  if (savedPosition) {
    // savedPosition is only available for popstate navigations.
    return savedPosition
  } else {
    const position = {}
    // new navigation.
    // scroll to anchor by returning the selector
    if (to.hash) {
      position.selector = to.hash
    }
    // 如果meta中有scrollTop
    if (to.matched.some(m => m.meta.scrollToTop)) {
      // cords will be used if no selector is provided,
      // or if the selector didn't match any element.
      position.x = 0
      position.y = 0
    }
    // if the returned position is falsy or an empty object,
    // will retain current scroll position.
    return position
  }
}

与keepAlive结合，如果keepAlive的话，保存停留的位置：

scrollBehavior (to, from, savedPosition) {
     if (savedPosition) {
            return savedPosition
    } else {
        if (from.meta.keepAlive) {
        　　from.meta.savedPosition = document.body.scrollTop;
        }
        return { x: 0, y: to.meta.savedPosition ||0}
    }
}

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

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

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

1. scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”，或者切换导航的时候触发。

2. console.log(to) // to：要进入的目标路由对象，到哪里去

3. console.log(from) // from：离开的路由对象，哪里来

4. console.log(savePosition) // savePosition：会记录滚动条的坐标，点击前进/后退的时候记录值{x:?,y:?}

5. }

        实现滚动行为的代码：router/index.js

1. let router = new VueRouter({

2. mode:'history',//默认是hash模式

3. linkActiveClass:'menvscode-active',

4. scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”，或者切换导航的时候触发。

5. console.log(to) // to：要进入的目标路由对象，到哪里去

6. console.log(from) // from：离开的路由对象，哪里来

7. console.log(savePosition) // savePosition：会记录滚动条的坐标，点击前进/后退的时候记录值{x:?,y:?}

8. if(savePosition) {

9. return savePosition;

10. }else{

11. return {x:0,y:0}

12. }

13. },

14. routes:[

15. {

16. path:'/',

17. name:'index',

18. component:Home,

19. },

20. {

21. path:'/home',

22. name:'Home',//name代表当前的路由

23. component:Home,

24. alias:'/index' //当访问'/index'的时候，就能匹配到当前的路由了。

25. },

26. {

27. path:'/document',

28. name:'Document',

29. components:{ // 多个视图的时候，默认渲染default的视图。

30. default:Document,

31. slider:Slider,

32. home:Home

33. }

34. }

35. ]

36. })

37.  

38. export default router

        我们还可以设hash来控制滚动行为，定位到某一位置

1. if(to.hash){ //先判断目标路由有没有hash值

2.     return {selector:to.hash}

3. }

App.vue：在路劲后面添加 hash 值。

1. <template>

2. <div id="app">

3. <div class="nav-box">

4. <ul class="f-cb">

5. <li>

6. <router-link to="/" exact tag="div" event="mouseover">home</router-link>

7. </li>

8. <li>

9. <router-link :to="{path:'/document#abc'}" event="mouseover">document</router-link>

10. </li>

11. <router-link to="/about" tag="li" event="mouseover">

12. <i></i>

13. <span>about</span>

14. </router-link>

15. </ul>

16. </div>

17. <div class="content f-cb">

18. <router-view name="slider"></router-view> <!-- 命名视图 -->

19. <router-view class="center"></router-view>

20. </div>

21. </div>

22. </template>

@/components/Document.vue

1. <template>

2. <div>

3. 我是文档

4. <p id="abc">定位到这个元素</p>

5. </div>

6. </template>

router/index.js

1. let router = new VueRouter({

2. mode:'history',//默认是hash模式

3. linkActiveClass:'menvscode-active',

4. scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”，或者切换导航的时候触发。

5. console.log(to) // to：要进入的目标路由对象，到哪里去

6. console.log(from) // from：离开的路由对象，哪里来

7. console.log(savePosition) // savePosition：会记录滚动条的坐标，点击前进/后退的时候记录值{x:?,y:?}

8. /*if(savePosition) {

9. return savePosition;

10. }else{

11. return {x:0,y:0}

12. }*/

13. if(to.hash){ //先判断目标路由有没有hash值

14. return {selector:to.hash}

15. }

16. },

17. routes:[]

18. })

19.  

20. export default router