Vue Routerで名前付きrouter-viewを使用する

この記事は2021年01月26日に投稿しました。

1. はじめに
2. Vue Routerで名前付きrouter-viewを使用する
3. おわりに

リンク

1. はじめに

こんにちは、iOSのエディタアプリPWEditorの開発者の二俣です。
今回は業務で使用しているVue Routerで画面の1部分を切り替える方法についてです。

目次へ

2. Vue Routerで名前付きrouter-viewを使用する

Vue Routerで画面の1部分を切り替える方法ですが、以下の手順になります。
Vue CLIプロジェクトが対象になります。

1.画面コンポーネントを作成します。

src/views/Home.vue

<template>
  <div>
    <h1>ホーム画面</h1>
  </div>
</template>

<script>
export default {
    name: 'Home',
};
</script>

src/views/Main.vue

<template>
  <div>
    <h1>メイン画面</h1>
  </div>
</template>

<script>
export default {
    name: 'Main',
};
</script>

src/components/Content1.vue

<template>
  <div>
    <h2>内容1</h2>
  </div>
</template>

<script>
export default {
    name: 'Content1',
};
</script>

src/components/Content2.vue

<template>
  <div>
    <h2>内容2</h2>
  </div>
</template>

<script>
export default {
    name: 'Content2',
};
</script>

2.src/route.jsを以下の内容で作成します。

import Vue from  'vue';
import VueRouter from 'vue-router';

import Home from './views/Home';
import Main from './views/Main';
import Content1 from './components/Content1';
import Content2 from './components/Content2';

Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        name: 'home',
        // この場合、App.vueで配置した名前なしのrouter-viewのみ切り替わります。
        component: Home,
    },
    {
        path: '/main',
        name: 'main',
        components: {
            // App.vueで配置したrouter-viewに切り替わります。
            // default: 名前なしのrouter-view
            // content1: content1のrouter-view
            // content2: content2のrouter-view
            default: Main,
            content1: Content1,
            content2: Content2,
        },
    },
];

const router = new VueRouter({
    mode: 'history',
    routes: routes,
});

export default router;

3.src/App.vueを以下の内容で修正します。

<template>
  <div id="app" class="gridLayout">
      <router-link to="/" class="link">Home</router-link>
      <router-link to="/main" class="link">Main</router-link>
      
      <!-- 名前なしと名前付きのrouter-viewを配置します。 -->
      <router-view class="title"/>
      <router-view name="content1" class="content"/>
      <router-view name="content2" class="content"/>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style scoped>
.gridLayout {
  display: grid;
  width: 600px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 50px;
}
.link {
  display: flex;
  justify-content: center;
  align-items: center;
}
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: 1 / span 2;
  color: blue;
}
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: 1 / span 2;
  text-align: center;
  color: green;
}
</style>

実行結果

ホーム画面

メイン画面

参考

Vue

Vue CLI

Vue Router

目次へ

3. おわりに

名前付きにrouter-viewを使用すると、1つの画面で複数のコンポーネントを切り替えられるようになります。

リンク

紹介している一部の記事のコードはGitlabで公開しています。
興味のある方は覗いてみてください。

目次へ

---

私が勤務しているニューラルでは、主に組み込み系ソフトの開発を行っております。
弊社製品のハイブリッドOS Bi-OSは高い技術力を評価されており、特に制御系や通信系を得意としています。
私自身はiOSモバイルアプリやウィンドウズアプリを得意としております。
ソフトウェア開発に関して相談などございましたら、お気軽にご連絡ください。

また一緒に働きたい技術者の方も随時募集中です。
興味がありましたらご連絡ください。

EMAIL : info-nr@newral.co.jp / m-futamata@newral.co.jp
TEL : 042-523-3663
FAX : 042-540-1688

目次へ