Skip to main content

Vue Router 使用技巧

定制 scrollBehavior 滚动行为​

有时我们希望每次路由跳转，都让指定的元素 scroll 到具体位置，这时候可以把代码放在此处。

例如，每次切换路由（用户点击了 RouterLink）始终将 #app 滚动到顶部：

// src/router/index.js
const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    /* 用户点击了 RouterLink 就立即将 #app 滚动到顶部 */
    document.getElementById('app').scrollTo({ top: 0 });
    /* 仅 Hash 模式下，且浏览器原生的前进/后退，才会将 #app 滚动到顶部 */
    return { el: '#app', top: 0 }
  },
})

注意体会二者差别。

若希望用 vue-router 提供的默认机制，首要前提是路由是在 hash 模式下，其次 scrollBehavior 里面虽然返回的是 scrollToOptions 对象，但会限制在浏览器前进后退时才可用。

相关文档：https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html