vue中使用vue-router切换页面时自动滚动到顶部的方法，并且不聚焦到底部input

最新推荐文章于 2024-08-09 11:20:59 发布

羊羊羊92

最新推荐文章于 2024-08-09 11:20:59 发布

阅读量1.5k

点赞数 1

本文链接：https://blog.csdn.net/weixin_40716786/article/details/88343937

版权

本文探讨了在Vue中使用vue-router切换页面时如何使页面自动滚动到顶部，同时避免在iOS设备上出现滚动兼容问题和输入框自动聚焦的问题。通过使用vue-router的scrollBehavior方法解决了页面滚动问题，而在iOS环境中，为了避免输入框自动获取焦点，需要注意数据加载与DOM渲染的时机。

摘要由CSDN通过智能技术生成

问题1：vue路由切换之后，之前的滚动距离会一直存在，页面没有到顶部。

router.afterEach((to,from,next) => { window.scrollTo(0,0); })

这样解决有如下几个问题
1.scrollTo方法部分在手机上的部分浏览器不支持，也就是不兼容。
2.用scrollTo方法会在苹果手机上会产生返回白屏问题（vue项目在IOS中多次返回会出现一半白屏挡住页面）

最后总结下来还是利用vue-router自带的滚动行为解决，官方网址https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html

在定义路由的new Route里添加scrollBehavior方法就可以了

export default new Router({

  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return {x: 0, y: 0}
    }
  },
  routes: constantRouterMap
})

滚动也流畅了，路由切换的时候可以到下一页面顶部了

问题2：vue项目（hash模式）嵌入IOS的APP当中，从上一页面A页面进入到下一页面B页