Vue SPA App.vue内でのナビゲーションバー表示切り替え

Question

現在、以下のようにrouterをtransitionで囲み、ページ遷移アニメーションを使用しています。

<template>
  <div id="app">
    <transition mode="out-in">
      <router-view/>
    </transition>
  </div>
</template>

しかし、この状態だと内部のナビゲーションバーまでページ遷移してしまうのでtransitionの外に出そうと思いました。
そこで問題になったのがナビゲーションバーが一意ではないことです。
例えばログインページにはログインのオプションをつけたいし、ログインが必要なページにはログアウトオプションをつけたいです。これでは外に出すことができません（routerでrenderされるものがどっちか判別できないため）
これを実現することは可能でしょうか？
ログイン状態の確認にはcognitoを使用しています。
ディレクトリ構造は以下になります。

src/
├── App.vue
├── assets
│   └── images
├── cognito
│   ├── cognito.js
│   └── index.js
├── components

また、外に出さずに実現する方法やその他スマートな方法があれば教えて欲しいです。

Answer 1

名前付きビューを使えば良いと思います。

<template>
  <div id="app">
    <router-view name="navigation"/>
    <transition mode="out-in">
      <router-view/>
    </transition>
  </div>
</template>

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        navigation: Bar
      }
    }
  ]
})

Comments

[_Victorique__]

回答ありがとうございます。
こんな方法があるんですね。知りませんでした。
ちなみにログイン前のナビゲーションバーとログインが必要なページのナビゲーションバーの切り替えはどのようにやるのでしょうか？
login, signupのページと、それ以外のページでナビゲーションバーを2つに分けようと考えております。
それぞれルーターのcomponentsに指定すれば自動で選択されますでしょうか？

[yhg]

はい、ルーターのcomponentsをそれぞれ指定してやるだけで、ルートによってナビゲーションのコンポーネントが切り替わります。

[_Victorique__]

便利すぎませんか？笑
まさにこのためにある機能って感じがします。
この機能って主にどのような使われ方をするんでしょうか？

[yhg]

私の場合はサイドバー入れ替えたり、グローバルヘッダーの一部分をルート毎に入れ替えたりとかしてます。
あまり使い倒したことはないけど便利ですよね。

[_Victorique__]

なるほどです！
有難う御座いました！