因为基于 SPA 模式开发，所以页面仅有一个，实现页面切换是利用 哈希 与 组件 的映射关系， vue-router 是通过哈希来模拟完整的 url ，但是对于页面来说仍是一个 url ，所以在任何一个组件滚动页面，切换到其他组件的时候，页面仍保持滚动之前的状态。

管理组件的滚动行为

让页面回到顶部

router.beforeEach()

每次切换组件的时候让页面回到顶部。

  1. router.beforeEach((to, from, next) => {
  2.   // 让页面回到顶部
  3.   document.documentElement.scrollTop = 0
  4.   // 一定不要忘记调用 next()
  5.   next()
  6. })

scrollBehavior

官网 传送门

  1. const scrollBehavior = function (to, from, savedPosition) {
  2.   // savedPosition 会在你使用浏览器前进或后退按钮时候生效
  3.   // 这个跟你使用 router.go() 或 router.back() 效果一直
  4.   if (savedPosition) {
  5.     return savedPosition
  6.   } else {
  7.     // 如果不是通过上述行为切换组件，就会让页面回到顶部
  8.     return {x: 0, y: 0}
  9.   }
  10. }

个性化定制

当用户在浏览 home 页面到底部的时候，跳转到 list 页面浏览，当浏览到中间的时候，跳转到 about 页面浏览，当用户每次回退的时候，都希望保持离开之前页面的状态，即：从 about 回退到 list 页面的时候，页面仍是在中间，回退到 home 页面的时候，仍是在底部。

在前端路由跳转中，路由跳转前都是会经过 beforeEach ，而 beforeEach 可以通过 next 来控制到底去哪个路由。根据这个特性我们就可以在 beforeEach 中设置一些条件来控制路由的重定向。常见的使用场景有：

  1. 验证用户是否登录（若未登录，且当前非登录页面，则自动重定向登录页面）；
  2. 用户权限；
  3. 用户输入的路路径是否存在，不存在的情况下如何处理，重定向到哪个页面。


参考链接