NativeScript Vue - 导航到其他组件同时保持具有配置文件信息的相同顶部的最佳方式？

Posted 2023-04-14

【中文标题】NativeScript Vue - 导航到其他组件同时保持具有配置文件信息的相同顶部的最佳方式？

【英文标题】：NativeScript Vue - Best way to navigate to other components while maintaining the same top section that has profile info?

【发布时间】：2019-11-23 18:39:46

【问题描述】：

我希望为已登录状态和个人资料头像的登录用户设置一个顶部，但我希望在不同组件下方的所有内容。如何在顶部栏部分保持一致时导航到其他组件？我必须在每个组件上都包含顶部条形码吗？

【问题讨论】：

可以自定义操作栏

但这仍然会在每次页面进入堆栈中的新组件时呈现重新呈现的外观。我希望它看起来像顶部是一个静态部件，并且它下面的所有内容都会随着组件的变化而变化。

这取决于您如何管理您的路线。在您的根组件中，您可以固定顶部，而在下部，您可以使用路线在组件中移动

谢谢。有没有关于如何做到这一点的文档？在我的根目录下，我只有：new Vue(render: h => h('frame', [h(router['app'])])).$start()，然后所有的逻辑都在 App.vue 中。

我对'vue'了解不多，但可能是这样的github.com/nativescript-vue/nativescript-vue-router/blob/…

【参考方案1】：

Frame 是负责处理导航的 UI 元素。 Frame 一次可以显示一个页面，该页面可以有一个 ActionBar。

如果您的意图不仅仅是在每个页面中复制 ActionBar 代码，请编写仅包含您的 ActionBar 的 Vue 组件，该 ActionBar 可以在每个其他组件中导入。

您也可以使用嵌套框架，让外框架保持 ActionBar 与内框架上的导航一致。

【讨论】：

谢谢。在这种情况下构建应用程序时的最佳实践是什么？在您提到的选项中，是否只是为顶部 ActionBar 提供专用的 Vue 组件，我可以在每个页面中导入它还是使用嵌套框架？我担心的是，即使我将navigateTo 字段animate 设置为false，ActionBar 组件也必须再次渲染并短暂“闪烁”，这是我试图避免的。但是，我不想让事情变得过于复杂。如果这是最佳做法，我会很乐意这样做，但如果嵌套框架是，我不介意研究这种方法。

没有针对所有需求的一站式解决方案，每个应用程序/需求在某种程度上都是独一无二的。如果你问我，我只会使用 Vue 组件并将其导入每个页面。但当然，您可能会在导航时看到一点闪光（呈现新导航页面的新操作栏）。如果你想避免这种情况，你必须使用嵌套框架。

太好了，谢谢你的帮助