Vue:BottomNavigationによるRouteの保持について

Question

私はVue.jsを使ったアプリを開発しており
ボトムナビゲーションを使った画面遷移を構築したいと考えています。

ネットにはナビゲーションを使った画面の変更処理は多く掲載されています。
これで切り替えを行う事は出来たのですが、各コンポーネント内でさらにページを遷移する方法がいくら探しても見つからないので質問させていただきます。



一応よくある例を参考までに記載↓

<div id="app">
  <v-app>
    <v-content>
      <v-container fluid>
        <v-fade-transition mode="out-in">
          <router-view></router-view>
        </v-fade-transition>
      </v-container>
    </v-content>      

  <v-bottom-navigation
     app
     color=primary
     shift>
        <v-btn to="/page1" value="page1">
            <span>page1</span>
        </v-btn>

        <v-btn to="/page2" value="page2">
            <span>page2</span>
        </v-btn>
    </v-bottom-navigation>

  </v-app>
</div>

Vue.use(VueRouter)
let component1 = {
  template:`<div class="title">Page 1</div>`
}
let component2 = {
  template:`<div class="title">Page 2</div>`
}
let router = new VueRouter({
  routes: [
    {
      path: '/page1',
      name: 'Page 1',
      component: component1,
    },
    {
      path: '/page2',
      name: 'Page 2',
      component: component2,
    },
    { path: '*', redirect: '/page1' }
  ]
})
new Vue({
  el: '#app',
  router,
  vuetify: new Vuetify(),
  data: () => ({
  })
})

　

参考としてラインを想像していただくと解りやすいと思います。
ボトムナビゲーションで『ホーム』や『トーク』等の画面構成がされており、そこまでは上記コードで実現が可能ですが
『トーク』画面で表示される内容では友達との会話履歴が表示されており、各友達のアイコンをクリックするとその人との会話履歴画面へと遷移します。
この、各画面内での遷移の方法を探しております。


友達との会話画面の状態でタブメニューから一度ホームボタンを押し、またトークを押した際に会話画面のまま状態が維持されている構成にするにはどうすればいいのでしょうか？

Answer 1

Vueの性質上、このようなTab毎での遷移管理は不可能なようなので
各ページの遷移状態を各TAB毎に配列に保持し、バックアクションが発生する度に現在アクティブなタブと配列状況を識別し保持しておいたURLに移動させる事で対応する事にしました。
細かな情報はQに保持するとして・・これぐらいプラグイン側で対応してくれていてもおかしくないんだけどなあ・・