滚动行为

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

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

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

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

返回 ScrollToOptions 位置对象

该函数可以返回一个ScrollToOptions位置对象:

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    // 始终滚动到顶部
    return { top: 0 }
  },
})

你也可以通过el传递一个 CSS 选择器或一个 DOM 元素。在这种情况下，top和left将被视为该元素的相对偏移量。

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    // 始终在元素 #main 上方滚动 10px
    return {
      // 也可以这么写
      // el: document.getElementById('main'), el: '#main', top: -10,
    }
  },
}

如果返回一个falsy的值，或者是一个空对象，那么不会发生滚动。

返回 savedPosition 位置对象

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

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  },
})

滚动到锚点

如果你要模拟“滚动到锚点”的行为：

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return { el: to.hash,
      }
    }
  },
})

如果你的浏览器支持滚动行为，你可以让它变得更流畅：

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return { el: to.hash, behavior: 'smooth',
      }
    }
  }
})

延迟滚动

有时候，我们需要在页面中滚动之前稍作等待。例如，当处理过渡时，我们希望等待过渡结束后再滚动。要做到这一点，你可以返回一个Promise，它可以返回所需的位置描述符。下面是一个例子，我们在滚动前等待 500ms：

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({ left: 0, top: 0 })
      }, 500)
    })
  },
})

我们可以将其与页面级过渡组件的事件挂钩，以使滚动行为与你的页面过渡很好地结合起来，但由于使用场景可能存在的差异和复杂性，我们只是提供了这个基础来实现特定的用户场景。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com