Monaca Onsen UI Discord Chat Github Repo

Use VueRouter for Kitchensink Example (Vue)

  • Hi,

    I’m learning Onsen via this Onsen Kitchensink example - My plan is to integrate VueRouter to ons-tabbar so that I can access to specific tab via specific URL.


    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
    <v-ons-tabbar position="auto"
          @postchange="showTip($event, 'Tip: Try swiping pages!')"
          <router-view slot="pages">
          <v-ons-tab v-for="(tab, i) in tabs"
              :active="$ === tab.label"
              @click.prevent="$router.push({name: tab.label})"

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