Monaca Onsen UI Discord Chat Github Repo

Use VueRouter for Kitchensink Example (Vue)



  • Hi,

    I’m learning Onsen via this Onsen Kitchensink example - https://github.com/OnsenUI/vue-onsenui-kitchensink. My plan is to integrate VueRouter to ons-tabbar so that I can access to specific tab via specific URL.

    So:

    1. I setup VueRouter, here’s my routes
    routes =  [
      {path: '/camera', name: 'Camera', component: camera},
      {path: '/home', name: 'Home', component: Home},
      {path: '/forms', name: 'Forms', component: Forms},
      {path: '/anim', name: 'Anim', component: Anim}
    
    1. Modify AppTabbar.Vue as instructed by https://onsen.io/v2/guide/vue/
    <v-ons-tabbar position="auto"
          swipeable
          :modifier="''"
          :on-swipe="null"
          :tabbar-style="swipeTheme"
          @postchange="showTip($event, 'Tip: Try swiping pages!')"
        >
        
          <router-view slot="pages">
          </router-view>
          <v-ons-tab v-for="(tab, i) in tabs"
              :key="i"
              :icon="tab.icon"
              :label="tab.label"
              :active="$route.name === tab.label"
              @click.prevent="$router.push({name: tab.label})"
              >
          </v-ons-tab>
    </v-ons-tabbar>
    

    But it doesn’t work. The app show blank page with no error in console. Does anyone know where am I missing ?