基于 NativeScript Vue Auth 的导航

Question

尝试了几个小时后，我想问一下，我怎样才能在我的应用程序中有一个简单的基于 Auth 的导航？

我的 vuex 中有一个由 auth 侦听器设置的 firebase auth 用户，到目前为止一切正常。

现在我只想在用户登录时显示 <Main /> 屏幕，否则我想显示 <sign-in /> 屏幕。

我尝试了很多 v-if 的解决方案，创建组件的导航等，但没有找到任何关于如何完成此操作的示例。

我如何想象它应该如何工作：App.vue

<template>
  <Page>
    <Frame v-if="user" id="main">
      <main />
    </Frame>
    <Frame v-else>
      <sign-in-page />
    </Frame>
  </Page>
</template>

Answer 1

有多种方法可以解决这个问题。我更喜欢的方法是创建一个使用 $navigateTo 或模态导航的自定义路由器。您应该将您的应用程序视为多个不同的页面。然后你的路由器可以是

let routes = {
   navigate(instance, routeName, options) {
      return instance.$navigateTo(routeName, options);
   }
}

export default routes

然后在你的组件中

<script>
   import routes from '~/router'; // Path to your router

   router.navigate(this, LoginView, {}) // use in methods
</script>

有了这个基本思想，就可以添加 pre 和 post 导航规则和功能。您还可以集中所有路线并注册它们。这是一个导入，但它也可以是 vue 的插件。

您应该有 1 个登录页面、1 个加载页面、1 个主页...

当应用程序启动时，它总是会转到您决定根据 firebase 身份验证状态重新路由的加载。

基于 NativeScript Vue Auth 的导航

NativeScript Vue Auth based Navigation

javascript

vue.js

nativescript

nativescript-vue