vue项目，路由跳转页面后滚动条自动回到顶部_vue keep-alive切换路由时页面滚动位置回到了顶部怎么办

一，现象

假设有两个页面，A和B。
当A页面很长时，我们在访问A页面时滚动条滚动到底部，这时候跳转到B页面，滚动条将不会变动，也就是B页面的滚动条还是在底部

二，原因

因为我们使用vue开发项目时，通常是使用vue-router路由来完成页面的跳转，而通常页面的布局如下分为header,aside，main,footer等部分，我们路由跳转只是不断地切换main中的内容罢了。

按f12查看，就可以看到，滚动条实际上是document.body上面的，也就是说，我们路由跳转时，滚动条压根就不受影响。所以才会出现这个问题。

三，解决方案

既然是body上的，那么我们只要在路由跳转时手动把滚动条的位置设置到顶部不就好了嘛！
于是有这段代码：

document.body.scrollTop = 0
  // firefox浏览器中是这句
document.documentElement.scrollTop = 0
1
2
3

但是问题又来了，我怎么知道啥时候路由跳转呢？
vue-router有个全局路由导航，可以拦截所有的路由跳转：

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: login
    },
})
router.beforeEach((to, from, next) => {
  document.body.scrollTop = 0
  // firefox
  document.documentElement.scrollTop = 0
  next()
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14