滚动行为【路由跳转时，页面滚动到指定位置】

最新推荐文章于 2023-11-30 09:42:53 发布

白小水i

最新推荐文章于 2023-11-30 09:42:53 发布

阅读量628

点赞数 1

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/m0_62508027/article/details/130712567

版权

1.实现效果

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

注意: 这个功能只在支持 history.pushState 的浏览器中可用。

2.具体实现代码

export default new VueRouter({
  // 配置路由
  routes: routes,
  // 滚动行为 ，注意：与 routs 配置 同一级
  scrollBehavior(to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    // 返回 y = 0，代表滚动条在最上方
    return {
      y: 0 // 最小是 0
    }
  }
})