来源：Vue3 + vite + Ts + pinia + 实战 + 源码 +electron

切换到新路由时，有时需要让页面滚动到顶部，或保持原先的滚动位置，Vue-Router可以自定义路由切换页面时的滚动方式

当创建一个Router实例时，可以提供一个scrollBehavior方法，返回滚动数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import { createRouter, createWebHistory } from "vue-router"
import type { RouteRecordRaw } from "vue-router"

const routes: Array<RouteRecordRaw> = [
  // 省略......
]

const router = createRouter({
  // 路由的模式
  history: createWebHistory(),
  scrollBehavior: (to, from, savePosition)=> {
    console.log(savePosition)
    // 跳转前有没有页面滚动数据
    if(savePosition) {
      // 如果有，就保持滚动高度
      return savePosition
    } else {
      // 否则定位为顶端
      return {
        top: 0
      }
      // 也支持返回promise
      // return new Promise((r)=> {
      //   setTimeout(() => {
      //     r({
      //       top: 114514
      //     })
      //   }, 2000)
      // })
    }
  },
  // 路由信息
  routes
})

export default router