Vue-onsenui how to use both v-ons-navigator and v-ons-tabbar

TO-alsaiyed

Hello Community =),

I try to use this two components together and had a problem after i added the tabbar into the navigator.
After i added the tabbar, i could not use the navigator anymore it seems like it loses some reference maybe the pageStack but it’s unclear for me.

<template>
  <v-ons-page>
    <v-ons-navigator swipeable
        :page-stack="pageStack"
        @push-page="pageStack.push($event)">
    </v-ons-navigator>
    <custom-tabbar></custom-tabbar>
  </v-ons-page>        
</template>

<template>
           <v-ons-tabbar position="bottom"
      :tabs="tabs"
      :visible="true"
      :index.sync="activeIndex">
          </v-ons-tabbar>
</template>

<script>
import defaultMixin from "../mixins/default";
import page1 from "../sections/page1";
import page2 from "../sections/page2";
import page3 from "../sections/page3";
import page4 from "../sections/page4";

export default {
  mixins: [defaultMixin],
  props: ["backLabel"],
  data() {
    return {
      activeIndex: 0,
      tabs: [
        {
          icon: "ion-home",
          label: "page1",
          page: page1,
          props: {
            myProp: "This is a page prop!"
          },
          key: "page1"
        },
        {
          icon: "ion-home",
          label: "page2",
          page: page2,
          props: {
            myProp: "This is a page prop!"
          },
          key: "page2"
        },
        {
          icon: "ion-home",
          label: "page3",
          page: page3,
          props: {
            myProp: "This is a page prop!"
          },
          key: "page3"
        },
        {
          icon: "ion-home",
          label: "page4",
          page: page4,
          props: {
            myProp: "This is a page prop!"
          },
          key: "page4"
        }
      ]
    };
  }
};
</script>

I have tried many ways but nothing worked.

any suggestions?

Fran Diox

@TO-alsaiyed You cannot use two routing components at the same level. One must be child of the other. Check this tutorial: https://onsen.io/playground/?framework=vue&category=common patterns&module=navigator_tabbar

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Vue-onsenui how to use both v-ons-navigator and v-ons-tabbar