vue vue-router路由跳转后滚动条自动滚动到顶部

最新推荐文章于 2024-04-29 11:44:59 发布

淳于晗歌

最新推荐文章于 2024-04-29 11:44:59 发布

阅读量4.5k

点赞数 4

文章标签： vue

本文链接：https://blog.csdn.net/qq_42421611/article/details/106488945

版权

我们在写路由跳转的时候，通常会希望界面跳转后显示为滚动条滚动到我们想要的位置（顶部），一般使用Window.scrollTo() 方法，其语法为：

window.scrollTo(xpos, ypos)

xpos：必需。要在窗口文档显示区左上角显示的文档的 x 坐标。

ypos：必需。要在窗口文档显示区左上角显示的文档的 y 坐标。

例如滚动内容的坐标位置100,500：

window.scrollTo(100,500);

这个scrollTop这儿只是简单说一下，下面我们来看下vue-router中的滚动行为：

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

1、在创建一个 Router 实例时，可以提供一个 scrollBehavior方法：

const router = new VueRouter({
 routes: [...],
 scrollBehavior (to, from, savedPosition) {
   return { 期望滚动到的位置 }
 }
})

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的前进/后退按钮触发) 时才可用。这个方法返回滚动位置的对象信息，长这样：

关注