Vueでのレイアウトの出し分け

わからなくて5時間ぐらい悩みました。
→ 可能であれば、nuxtのレイアウト機能を使ったほうが良いと思っています。

概要

この2つのレイアウトを必要に応じて出し分けたい。

• ワンカラムのログイン画面。
• ツーカラムのメイン画面（ログイン後）

検討

• ログイン画面を静的コンテンツにする
  →使おうと思えばVue使えるけど…微妙。

• メイン画面にサイドバーなどのコンポーネントの記述を含ませる
  → 各画面ごとに複数コンポーネントの記述をしなければならなくなるので、できればやりたくない。vueファイル内にはそのページの内容だけ書きたい。

解決策

ネストされたルートを使う。
2カラムレイアウトの方はMainコンポーネント内でコンテンツを呼び出す。

/ から始まるネストされたパスは root パスとして扱われることに注意してください。これによってネストされた URL を指定しなくてもコンポーネントをネストすることができます。

ドキュメント内にこう書かれているように、rootパスを使うこともできるので、URLがネストしている必要はない。

Main.vue

<template>
  <div>
     <sidebar/>
     <router-view/>
  </div>
</template>

<script>
  import Sidebar from './Sidebar';

  export default {
    components: { Sidebar },
    name: 'app',
  };
</script>

index.js

import Vue from 'vue';
import Router from 'vue-router';
import Login from '@/components/Login';　// 1カラムレイアウトのコンポーネント
import Main from '@/components/Main'; // 2カラムレイアウトのコンポーネント
import MainContents1 from '@/components/MainContents1';
import MainContents2 from '@/components/MainContents2';

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login,
    },
    {
      path: '/',
      component: Main,
      children: [
        {
          path: '/content1',
          component: MainContents1,
        },
        {
          path: '/content2',
          component: MainContents2,
        },
      ],
    },
  ],
});

結果

propsなどでの出し分け、分岐処理なしで必要に応じて複数のレイアウトを使い分けることができた。

• /login にアクセスすると1カラムレイアウト
• /content1 /content2 にアクセスすると2カラムレイアウト

備考

このままだと、ルートにアクセスした際に、router-viewが空の状態で描画されてしまうため、リダイレクトや代替コンテンツの設定が必要。