Monaca Onsen UI Discord Chat Github Repo

Vue-onsenui v-ons-navigator + v-ons-tabbar + vue-router



  • Hello Community ,

    I’m trying to use this two components togeter with vue-router. Is it possible to mix

    Tabbar

    <v-ons-tabbar>
      <router-view slot="pages"></router-view>
      <v-ons-tab v-for="name in ['Home', 'Settings']" :key="name"
        :label="name"
        :active="$route.name === name"
        @click.prevent="$router.push({name})"
      ></v-ons-tab>
    </v-ons-tabbar>
    

    with Navigator

    template: `
      <div id="app">
        <v-ons-navigator swipeable
          :page-stack="pageStack"
          :pop-page="goBack"
        ></v-ons-navigator>
      </div>
    `,
    methods: {
      goBack() {
        this.$router.push({ name: this.$route.matched[this.$route.matched.length - 2].name });
      }
    },
    created() {
      const mapRouteStack = route => this.pageStack = route.matched.map(m => m.components.default);
      mapRouteStack(this.$route);
      this.$router.beforeEach((to, from, next) => mapRouteStack(to) && next());
    }