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