Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. dj4bl0
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    dj4bl0

    @dj4bl0

    0
    Reputation
    1
    Posts
    271
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    dj4bl0 Follow

    Posts made by dj4bl0

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

      posted in Onsen UI
      dj4bl0