Vueでレイアウトを変更する

はじめに

NUXTを使用すればレイアウトを変更する仕組みがあるようですが、
Vue CLIで作成したプロジェクトのレイアウトを変更できるようにしてみる。
レイアウトの変更方法はこちらを元にさせて頂いております。

環境

$ node -v
v8.9.4

$ vue -V
3.1.1

準備

こちらからCloneする。
※TypeScriptで作成しています。

内容

1. プロジェクトを実行すると、ログイン画面が表示される。(と言ってもただのペラの一枚ページです。)
2. loginを押すとホーム画面に遷移する。

ログイン画面とホーム画面でレイアウト（ナビーバーの有無）を切り替えています。

説明

1 ルータでメタフィールドを持たせ画面によってレイアウトを変更できるようにする。

router.ts

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'login',
      meta: { layout: 'none'},
      component: () => import('./views/Login.vue'),
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
    },
    ...

2 レイアウト用のコンポーネントを作成する

DefaultLayout.vue

<template>
  <div id="default">
    <!-- ナビとかフッターのコンポーネントを追加したりする。 -->
    <div id="nav">
      <router-link to="/home">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/">Logout</router-link>
    </div>
    <router-view/>
  </div>  
</template>

NoneLayout.vue

<template>
  <div id="none">
    <router-view/>
  </div>  
</template>

3 レイアウト用のコンポーネントを定義

main.ts

...

import DefaultLayout from '@/layout/DefaultLayout.vue';
import NoneLayout from '@/layout/NoneLayout.vue';

Vue.component('default-layout', DefaultLayout);
Vue.component('none-layout', NoneLayout);

...

4 メタフィールドをみてcomputedでレイアウトを変更

App.vue

<template>
  <div id="app">
    <component v-bind:is="layout"/>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class App extends Vue {
  private defaultLayout: string = 'default';

  get layout(): string {
    return (this.$route.meta.layout || this.defaultLayout) + '-layout';
  }
}
</script>

その他

Gitのサンプルプロジェクトは以下の設定で作成しました。

Vue CLI v3.1.
? Please pick a preset: Manually select features
? Check the features needed for your project: TS, Router, Vuex, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? No
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? No