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

Posted 2023-02-22

【中文标题】CapacitorJS iOS 使用 Vue Router 向后滑动会导致空白页面

【英文标题】：CapacitorJS iOS Swipe back with Vue Router causes a blank page

【发布时间】：2022-01-17 17:25:20

【问题描述】：

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

使用此行的插件启用手势

bridge.getWebView()?.allowsBackForwardNavigationGestures = true;

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

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

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

scrollBehavior (to, from, savedPosition) 

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

在没有启用滚动行为的情况下，在向后滑动时，我确实会在滚动位置看到上一页。但是，当幻灯片动画结束时，页面会跳转到顶部。

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

【参考方案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 ;
    
  
);