Vue Routerで画面を切り替える - プログラムを書こう！

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

f:id:paveway:20190914064630j:plain

はじめに
Vue Routerで画面を切り替える
おわりに

リンク

1. はじめに

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

目次へ

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

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

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

※今回は3画面分作成します。　各画面の内容は表示名以外同じものになります。

Home.vue

<template>
  <div class="gridLayout">
    <div class="cell">Home</div>
  </div>
</template>

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

<style scoped>
  .gridLayout {
      display: grid;
      grid-template-columns: 300px;
  }
  .cell {
      text-align: center;
  }
</style>

View1.vue

<template>
  <div class="gridLayout">
    <div class="cell">View1</div>
  </div>
</template>

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

<style scoped>
  .gridLayout {
      display: grid;
      grid-template-columns: 300px;
  }
  .cell {
      text-align: center;
  }
</style>

View2.vue

<template>
  <div class="gridLayout">
    <div class="cell">View2</div>
  </div>
</template>

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

<style scoped>
  .gridLayout {
      display: grid;
      grid-template-columns: 300px;
  }
  .cell {
      text-align: center;
  }
</style>

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

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

import Home from './views/Home';
import View1 from './views/View1';
import View2 from './views/View2';

Vue.use(VueRouter);

// 切り替える画面のパスと画面コンポーネントを紐づけます。
const routes = [
    {
        path: '/',
        component: Home,
    },
    {
        path: '/view1',
        component: View1,
    },
    {
        path: '/view2',
        component: View2,
    },
];

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

export default router;

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

<template>
  <div id="app">
    <div class="gridLayout">
      <!-- router-linkにより画面を切り替えます。 -->
      <div class="cell"><router-link to="/">Home</router-link></div>
      <div class="cell"><router-link to="/view1">View1</router-link></div>
      <div class="cell"><router-link to="/view2">View2</router-link></div>
    </div>

    <!-- 切り替えた画面はrouter-viewに表示されます。 -->
    <router-view/>
  </div>
</template>

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

<style scoped>
  .gridLayout {
    width: 300px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .cell {
    text-align: center;
  }
</style>

参考

Vue CLI

Vue Router

目次へ

3. おわりに

前回は

www.paveway.info

Vue CLIプロジェクトでVue Routerをインストールする方法を紹介しました。
今回は実際にVue Routerを使って画面を切り替える方法の紹介になります。

リンク

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

目次へ

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

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

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

目次へ