1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue中多个路由页面切换造成滚动互相影响问题的解决

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

时间:2021-06-19 14:23:31

相关推荐

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

一、问题描述

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

二、问题解决

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。