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