プログラムを書こう!

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

Vue Routerで画面の1部分を切り替える

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

f:id:paveway:20190914064630j:plain

  1. はじめに
  2. Vue Routerで画面の1部分を切り替える
  3. おわりに

1. はじめに

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

目次へ

2. Vue Routerで画面を切り替える

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

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

※今回は親画面と切り替える画面を2画面分作成します。

Parent.vue(親画面)
<template>
  <v-app>
    <v-main>
      <v-container class="gridLayout">
        <div class="parent">親画面</div>
        <router-link to="/" class="child">子画面1表示</router-link>
        <router-link to="/child2" class="child">子画面2表示</router-link>
      </v-container>
      <!-- "子画面1表示"リンクまたは"子画面2表示リンク"クリックにより"router-view"の表示内容が切り替わります。 -->
      <router-view/>
    </v-main>
  </v-app>
</template>

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

<style scoped>
.gridLayout {
  width: 600px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.parent {
    grid-column: 1 / span 2;
    text-align: center;
}
.child {
    text-align: center;
}
</style>
Child1.vue(子画面)
<template>
  <v-container class="gridLayout">
    <div class="child">子画面1内容</div>
  </v-container>
</template>

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

<style scoped>
.gridLayout {
  width: 600px;
  display: grid;
  grid-template-columns: 1fr;
}
.child {
  text-align: center;
}
</style>
View2.vue(子画面)

※表示内容以外"Child1.vue"とほぼ同じです。

<template>
  <v-container class="gridLayout">
    <div class="child">子画面2内容</div>
  </v-container>
</template>

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

<style scoped>
.gridLayout {
  width: 600px;
  display: grid;
  grid-template-columns: 1fr;
}
.child {
  text-align: center;
}
</style>

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

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

import Parent from './views/Parent';
import Child1 from './views/Child1';
import Child2 from './views/Child2';

Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        component: Parent,
        children: [
            // "/"がリクエストされた場合、"Child1"が表示されます。
            {
                path: '/',
                components: {
                    default: Child1,
                },
            },

            // "/child2"がリクエストされた場合、"Child2"が表示されます。
            {
                path: '/child2',
                components: {
                    default: Child2,
                },
            },
        ],
    },
];

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

export default router;

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

<template>
  <router-view/>
</template>

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

Vue.js

Vue CLI

Vue Router

目次へ

3. おわりに

SPA(Single Page Application)として画面の一部分を切り替えて表示するため、Vue.jsを採用しました。
簡単にできるかと思ったのですが、やり方がわからず実現するのに時間がかかりました。

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

目次へ


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

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

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

目次へ