如何处理 Nativescript Vue 应用程序上的导航？

Posted 2023-04-13

【中文标题】如何处理 Nativescript Vue 应用程序上的导航？

【英文标题】：How to handle navigation on a Nativescript Vue app?

【发布时间】：2020-08-17 06:09:52

【问题描述】：

我在理解如何使用 NativeScript Vue 进行导航时遇到问题。我昨天开始，似乎无法让它工作。它说我的AppDrawer 组件是递归的。

主框架包含一个页面，其中包含菜单和操作栏。如果我点击某个东西，它会在主框架中加载新页面并重新加载菜单和操作栏。还是人们只是在中间使用一个框架来加载页面而无需重新绘制菜单/抽屉？这样做，我将如何从框架内更改操作栏或抽屉中的数据？我猜想使用 Vuex，但我不太确定在设计 android 应用时最佳方法是什么。

对不起，如果我弄错了一些术语。

导航/AppDrawer.vue：

<template>
  <StackLayout ~drawerContent backgroundColor="#444">
    <Label class="drawer-header" text="Drawer" />

    <Label class="drawer-item" text="Accueil" @tap="btnHome()" />
    <Label class="drawer-item" text="Item 2" @tap="btnAdd2()" />
    <Label class="drawer-item" text="Item 3" @tap="btnHistory()" />
  </StackLayout>
</template>
<script>
// Load pages
import App from "../App";
import Add2 from "../Add2";
import History from "../History";

export default 
  components: ,
  methods: 
    btnHome() 
      this.$navigateTo(App);
    ,
    btnAdd2() 
      this.$navigateTo(Add2);
    ,
    btnHistory() 
      this.$navigateTo(History);
    ,
  ,
;
</script>

App.vue：

<template>
  <Page>
    <ActionBar>
      <GridLayout  columns="auto, *">
        <Label
          text="MENU"
          @tap="$refs.drawer.nativeView.showDrawer()"
          col="0"
        />
        <Label class="title" text="Title" col="1" />
      </GridLayout>
    </ActionBar>

    <RadSideDrawer ref="drawer">
      <AppDrawer />

      <GridLayout ~mainContent columns="*" rows="*">
        <TextView editable="false">
          <FormattedString>
            <Span :text="msg" />
          </FormattedString>
        </TextView>
      </GridLayout>
    </RadSideDrawer>
  </Page>
</template>

<script>
import AppDrawer from "./nav/AppDrawer.vue";
import  device  from "tns-core-modules/platform";
export default 
  components: 
    AppDrawer,
  ,
  data() 
    return 
      msg:
        "Vous n'êtes pas connecté. Les téléversements seront assigné avec l'ID: " +
        device.uuid,
    ;
  ,
  methods: ,
;
</script>

History.vue：

<template>
  <Frame>
    <Page>
      <ActionBar>
        <GridLayout  columns="auto, *">
          <Label
            text="MENU"
            @tap="$refs.drawer.nativeView.showDrawer()"
            col="0"
          />
          <Label class="title" text="History" col="1" />
        </GridLayout>
      </ActionBar>

      <RadSideDrawer ref="drawer">
        <AppDrawer />

        <GridLayout ~mainContent columns="*" rows="*">
          <TextView editable="false">
            <FormattedString>
              <Span text="testing 1, 2" />
            </FormattedString>
          </TextView>
        </GridLayout>
      </RadSideDrawer>
    </Page>
  </Frame>
</template>
<script>
import AppDrawer from "./nav/AppDrawer.vue";

export default 
  components: 
    AppDrawer,
  ,
  data() 
    return ;
  ,
  methods: ,
;
</script>

编辑：

好的，我了解问题是我在App 中导入了AppDrawer，所以App 页面有一个菜单。然后我在AppDrawer 中导入App，因为我想要菜单中的“主页”按钮，这样用户就可以返回主页/屏幕。

这会创建一个循环。我仍然不明白人们如何在每个页面上导入菜单，并且仍然在菜单中导入每个页面，以便可以在该页面上重定向用户。

根据下面的答案，我尝试了：

<script>
export default 
  components: 
    App: () => import("../App.vue"),
    AddProduct: () => import("../Add2.vue"),
    History: () => import("../History.vue")
  ,
  methods: 
    btnHome() 
      this.$navigateTo(App);
    ,
    btnAdd2() 
      this.$navigateTo(Add2);
    ,
    btnHistory() 
      this.$navigateTo(History);
    
  
;
</script>

但我得到JS: [Vue warn]: Error in v-on handler: "ReferenceError: Add2 is not defined"。

【参考方案1】：

你在App 中导入AppDrawer，在AppDrawer.vue 中导入App，这个导入循环永远不会结束，如果你需要这样做，你必须使用延迟加载（虽然你导入并没有使用App组件）：

// in AppDrawer.vue
components: 
   'App': () => import('../App.vue')
,

【讨论】：

哦，我有点明白你在说什么，但是...我为$navigateTo 命令导入了App。据我了解，我需要为该命令提供 vue 模板文件。使用$navigateTo 从App 更改为History，因此App 不再是主vue，并且不存在任何循环。但是我的逻辑在这里显然是错误的：/我确实使用了 App 组件来实现该功能。尝试您的建议，我得到：JS: [Vue warn]: Error in v-on handler: "ReferenceError: AddProduct is not defined"，问题已更新。

关于 AddProduct ，您确定 ../Add2.vue 存在于该文件名的路径中吗？

感谢我创建一个新项目以确保我没有犯任何错误