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

Question

我在理解如何使用 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 width="100%" 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 width="100%" 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"。

Answer 1

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

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