Question

路由滚动行为

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

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

const router = createRouter({
  history: createWebHistory(),
  scrollBehavior: (to, from, savePosition) => {
    /* scrollBehavior 返回滚动位置的对象信息为 { left: number, top: number } */

    // 写死
    //return {
    //  top: 500
    //}

    //return new Promise((r) => {
    //  setTimeout(() => {
    //    r({
    //      top: 10000
    //    })
    //  }, 2000);
    //})


    // 使用记录的值
    if(savePosition) {
      return savePosition
    } else {
      return {
        top: 0
      }
    }

  },

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