プログラムを書こう!

実務や自作アプリ開発で習得した役に立つソフトウェア技術情報を発信するブログ

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

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

f:id:paveway:20190914064630j:plain

  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>

実行結果

ホーム画面

f:id:paveway:20210126083156p:plain

メイン画面

f:id:paveway:20210126083209p:plain

参考

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

目次へ