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 ?