VUE 在iphone上页面切换不置顶解决方案

背景

近期在使用vue构建移动端项目，采用vue+vue-router+vuex+mint-ui等…在测试iphone系列手机过程中发现路由切换后，页面不置顶，必须触摸滑动屏幕重新定位后才恢复正常。

解决方案

vue-router在官方文档提供有解决方案

当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：

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

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

实际就是当页面切换时将页面定位在初始位置就好，代码如下

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

相关文档参考
https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html#异步滚动