0

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

1 件の回答 1

0

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

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

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

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

自己解決。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。