How to handle navigation on a Nativescript Vue app?

Question

I'm having issue understanding how navigation works using NativeScript Vue. I started yesterday and can't seem to make it work. It says my AppDrawer component is recursive.

The main frame contain a page, which contain the menu and the action bar. If I click on something, it loads the new page in the main frame and reload the menu and the action bar. Or does people just use a frame in the middle to load the pages without having to redraw the menu/drawer? Doing so, how would I change the data in the actionbar or the drawer from inside the frame? I'm guessing using Vuex, but I'm not quite sure what is the optimal approach when designing an android app.

Sorry if I get some terminology wrong.

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>

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>

EDIT:

Ok, I understand the problem is that I import AppDrawer in App, so the App page have a menu. And I then import App in AppDrawer, because I want a "Home" button in the menu, so the user can return the the main page/screen.

This create a loop. I still don't understand how people import menus on each page and still have each page imported in the menu so user can be redirected on that page.

Based on the answer below, I tried:

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

But I get JS: [Vue warn]: Error in v-on handler: "ReferenceError: Add2 is not defined".

Mohsen · Accepted Answer · 2020-05-02 19:29:25Z

1

You are importing AppDrawer in App, and importing App in AppDrawer.vue, this import loop never end, you have to use lazyloading if you need do this (Although you imported and didnt use App componenet):

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

answered May 2, 2020 at 19:29

Mohsen

4,2551 gold badge34 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

HypeWolf Over a year ago

Oh, I kind of understand what you are saying, but... I imported App for the $navigateTo command. As I understand , I need to provide the vue template file to that command. Using $navigateTo change from App to History, therefore App is no longer the main vue, and there isn't suppose to be any loop. But my logic is clearly wrong here :/ I did use the App component for the function. Trying what you suggest, I get: JS: [Vue warn]: Error in v-on handler: "ReferenceError: AddProduct is not defined", question updated.

Mohsen Over a year ago

About AddProduct , are you sure ../Add2.vue exist in the path with this filename?

HypeWolf Over a year ago

Thanks gonna create a new project to make sure I didn't make any mistake

Collectives™ on Stack Overflow

How to handle navigation on a Nativescript Vue app?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related