Как работать с навигацией в приложении Nativescript Vue? - PullRequest
Новая
       31

Как работать с навигацией в приложении Nativescript Vue?

0 голосов
/ 02 мая 2020

У меня проблемы с пониманием того, как работает навигация с использованием NativeScript Vue. Я начал вчера и не могу заставить его работать. Он говорит, что мой AppDrawer компонент рекурсивный.

Основной фрейм содержит страницу, которая содержит меню и панель действий. Если я нажимаю на что-то, он загружает новую страницу в главном фрейме и перезагружает меню и панель действий. Или люди просто используют рамку посередине для загрузки страниц без необходимости перерисовывать меню / ящик? При этом, как бы я изменил данные на панели действий или в ящике внутри фрейма? Я предполагаю использовать Vuex, но я не совсем уверен, каков оптимальный подход при разработке приложения android.

Извините, если я неправильно понял терминологию.

nav / 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>

Приложение. 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>

История. 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>

РЕДАКТИРОВАТЬ:

Хорошо, я понимаю, проблема в том, что я импортирую AppDrawer в App, поэтому на странице приложения есть меню. И затем я импортирую App в AppDrawer, потому что мне нужна кнопка «Домой» в меню, чтобы пользователь мог вернуться на главную страницу / экран.

Это создает все oop. Я до сих пор не понимаю, как люди импортируют меню на каждой странице и все еще импортируют каждую страницу в меню, так что пользователь может быть перенаправлен на эту страницу.

Основываясь на ответе ниже, я попытался: 

<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 Ответ

1 голос
/ 02 мая 2020

Вы импортируете AppDrawer в App и импортируете App в AppDrawer.vue, этот импорт l oop никогда не заканчивается, вы должны использовать lazyloading, если вам это нужно (хотя вы импортировали и не использовали App компонент enet): 

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