Use VueRouter for Kitchensink Example (Vue)

dj4bl0

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:

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}

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 ?