解决vue中路由跳转时,让滚动条显示在顶部
解决vue中页面跳转,显示在顶部
·
在做项目时遇到这样的一个问题,当进行页面跳转时,总是从新页面中间开始显示,毫无头绪,不知道怎么回事,如图,每次进入到都显示在页面中间
解决:
方法一
在路由下的index中配置如下代码就完美解决,所有页面都适用,这应该是利用路由守卫进行解决,把滚轮位置每次定位到最顶端
2022-5.8补充
方法二:
在看了vue的官方文档后发现,官方提供了解决方案,
使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。
注意: 这个功能只在支持 history.pushState 的浏览器中可用。
当创建一个 Router 实例,你可以提供一个 scrollBehavior
方法:
scrollBehavior
函数接收to
和from
路由对象,如 Navigation Guards。第三个参数savedPosition
,只有当这是一个popstate
导航时才可用(由浏览器的后退/前进按钮触发)。该函数可以返回一个 ScrollToOptions 位置对象:
更多推荐
已为社区贡献2条内容
所有评论(0)