vue中多个路由页面切换造成滚动互相影响问题的解决
一、问题描述在vue的项目开发中,出现了这样的问题。在进入一个路由页面的时候,进行了页面滚动,滚动的位置会被缓存。当离开页面以后,下次再进入一个页面的时候,切换新路由,发现默认进入的位置就是之前滚动的位置。这样,也就造成了多个路由页面滚动会发生互相影响的问题,这也并不是我们所想要的。二、问题解决针对这样的问题,通过去vue的官网上,Vue Router中的滚动行为上有解决方法,可以使用scr...
·
一、问题描述
在vue
的项目开发中,出现了这样的问题。在进入一个路由页面的时候,进行了页面滚动,滚动的位置会被缓存。当离开页面以后,下次再进入一个页面的时候,切换新路由,发现默认进入的位置就是之前滚动的位置。这样,也就造成了多个路由页面滚动会发生互相影响的问题,这也并不是我们所想要的。
二、问题解决
针对这样的问题,通过去vue
的官网上,Vue Router
中的滚动行为上有解决方法,可以使用scrollBehavior
。scrollBehavior
的作用是返回滚动位置的对象信息,第一个和第二个参数接收to
和from
路由对象,第三个参数 savedPosition
当且仅当 popstate
导航,通过浏览器的 前进/后退 按钮触发时才可用。这样,对于所有路由导航,简单地让页面滚动到顶部。在router
的index.js
中,进行写就可以了。完整的代码如下所示:
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
更多推荐
已为社区贡献26条内容
所有评论(0)