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



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


  • Onsen UI

    @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


Log in to reply