ios - CapacitorJS iOS 使用 Vue Router 向后滑动会导致空白页面

Question

我有一个使用 Vue 和 Vue Router 的 Capacitor 项目，并启用了滑动手势 我不确定这个问题是来自 Vue Router 还是 Capacitor。

使用此行的插件启用手势

bridge.getWebView()?.allowsBackForwardNavigationGestures = true;

如果我转到一页，转到下一页，然后向后滑动。 上一页出现在 View 中并按预期滑入。

但是，如果我在移动到下一页之前滚动几个像素。向后滑动时，上一页显示为白色，没有内容。当前页面如预期滑出 只有当幻灯片转换完成后，上一页才会弹出到屏幕上

如果我删除路由器中的scrollBehaviour 函数，它会正常工作

scrollBehavior (to, from, savedPosition) {

该函数可以为空，也可以返回各种位置，这都会导致非事件页面上的幻灯片变白。

如果没有启用scrollBehavior，向后滑动时我确实会在原来的滚动位置看到上一页。但是，当幻灯片动画结束时，页面会跳转到顶部。

有人对如何解决这个问题有任何想法吗？

Answer 1

我没有使用任何插件，我按照以下说明更改了文件: https://github.com/ionic-team/capacitor/issues/3808#issue-743829827

我的VueRouter:

const router = new VueRouter({
 routes,
  mode: "hash",
  base: process.env.VUE_ROUTER_BASE,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  }
});