vue中多个路由页面切换造成滚动互相影响问题的解决

一、问题描述

在vue的项目开发中，出现了这样的问题。在进入一个路由页面的时候，进行了页面滚动，滚动的位置会被缓存。当离开页面以后，下次再进入一个页面的时候，切换新路由，发现默认进入的位置就是之前滚动的位置。这样，也就造成了多个路由页面滚动会发生互相影响的问题，这也并不是我们所想要的。

二、问题解决

针对这样的问题，通过去vue的官网上，Vue Router中的滚动行为上有解决方法，可以使用scrollBehavior。scrollBehavior的作用是返回滚动位置的对象信息，第一个和第二个参数接收to和from路由对象，第三个参数 savedPosition 当且仅当 popstate 导航，通过浏览器的 前进/后退 按钮触发时才可用。这样，对于所有路由导航，简单地让页面滚动到顶部。在router的index.js中，进行写就可以了。完整的代码如下所示：

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}