NativeScript Vue 模态中的 navigateTo 问题

Question

我正在尝试在我的 NativeScript Vue 应用程序的模式中使用 navigateTo()。

我的模态组件被包裹在一个 <Frame> 中，我理解这是如何让它成为一个导航控制器。但是，当我尝试导航到模态的子组件时，它实际上在主框架中的模态后面打开。

单击 "Open Modal" 按钮，然后单击 "Show subpage" 按钮。看似没有任何反应，但如果您随后单击 "Close" 按钮，您将看到在模式后面打开的子页面。

Answer 1

为了导航到模式中使用的框架，您应该使用 $navigateTo 方法的第二个参数。这可以通过引用或 id 来引用帧。我发现最简单的方法是给模式中的框架一个 id:

<Frame id="modal-frame">...</Frame>

然后您可以在模态框内导航，例如

this.$navigateTo(OtherComponent, {frame: 'modal-frame'});

请注意，您不要像 CSS 选择器那样在 ID 前面放置 #。只有id值。

Answer 2

同样问题的另一个原因是模态导航到的 sub-component 没有包含在 <Page> 标签中。

当您向导航代码添加捕获时，它会出现以下错误，具体取决于您使用的是 ref 还是 id。

this.$navigateTo(NewModal, {
  frame: "frame-id" // or "frame-ref"
}).catch(e => console.log(e));

"frame-ref" 抛出 TypeError: Cannot read property 'id' of undefined

"frame-id" 抛出 TypeError: backstackEntry.resolvedPage.onNavigatingTo is not a function

Issue with navigateTo in NativeScript Vue modal