您好,欢迎来到华佗小知识。
搜索
您的当前位置:首页滚动行为【路由跳转时,页面滚动到指定位置】

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

来源:华佗小知识

1.实现效果

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

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

2.具体实现代码

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

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- huatuo0.cn 版权所有 湘ICP备2023017654号-2

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务