50249


onsenui初心者です。  
tabbar,splitterを組み合わせて使いたいのですが、tabbarではメイン機能４つのページを切り替えて使い、splitterでは管理機能など使用頻度が低いページを複数表示して使用したいと考えています。  
tabbarで表示するメイン機能４つはtabbarで切り替えできるのですが、splitterで表示する他のページへ遷移させる方法で悩んでいます。  
navigatorを使う方法はよくわからないので、vue-routerを使ってルーティングをさせようと考えていますが、実装がよくわかりません。  
方法をご教示いただけないでしょうか？  
サンプルなどあれば嬉しいのですが。。。onsen.io/demo のデモも、tabbarとsplitterを併用していますが、tabbarのページ数 ＝
splitterのページ数になっていて、肝心のtabbarで扱わない他のページの部分はWebページへのリンクになっていて参考になりませんでした。


CC BY-SA 4.0
2018-11-11T08:30:57.997
50205
2018-11-12T12:29:06.160
30933
question
onsen-ui
v-ons-tabbar と v-ons-splitter を使って多くのページを扱いたい


自分で答えを見つけたので回答しておきます。

こんな感じで splitter-contentに、router-viewを入れてどのコンポーネントでも表示できるようにしておきます。

[code]

    <template>
      <v-ons-page id="app">
        <v-ons-splitter>
          <v-ons-splitter-side swipeable collapse width="250px" side="right"
            :animation="$ons.platform.isAndroid() ? 'overlay' : 'reveal'"
            :open.sync="menuIsOpen">
            <menu-page></menu-page>
          </v-ons-splitter-side>
    
          <v-ons-splitter-content>
            <transition :name="slideDirection" mode="in-out" appear>
              <router-view></router-view>
            </transition>
            <!-- <v-ons-tabbar></v-ons-tabbar> -->
          </v-ons-splitter-content>
        </v-ons-splitter>
      </v-ons-page>
    </template>
    
[/code]

v-ons-tabbarを使うコンポーネントも、splitterのサイドメニューから呼び出すことで  
tabbarアリのコンポーネント、無しのコンポーネントを routerで呼び分けられます。

自己解決。


CC BY-SA 4.0
2018-11-12T12:29:06.160
50249
2018-11-12T12:29:06.160
30933
50205
answer