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