Vue.jsのバージョン3でVue Routerを使用して画面を新規作成する（複数画面構成にする）

Vue.jsのバージョン3でVue Routerを使用して画面を新規作成してみます。

Vueのインストールからはじめます！

Vueインストール

以下のコマンドでインストールします。

npm install -g @vue/cli

次にプロジェクト作成します。

プロジェクト作成

以下のコマンドで「sample」というプロジェクトを作成します。

vue create sample

→上記コマンド実行時の設定については以下を参照

「Manually select features」を選択してエンター
組み込むモジュールの選択が求められるので、「Router」にチェックを追加してエンター
バージョン選択が求められるので「3.x」を選択してエンター
そのほかはお好みの設定をしてプロジェクト作成

サーバ起動

以下のコマンドで、プロジェクト直下に移動してサーバ起動

 cd sample

 npm run serve

動作確認

以下のURLで画面表示の確認をします。

http://localhost:8080/

問題なく表示されればOKです。

次に画面を追加してみます

画面を追加してみる

フォルダ構成

ざっくり以下の構成になっていて「src/views」と「src/router」配下のファイルを追加・修正することで画面を追加できます。

src/views

→viewファイル格納フォルダ

→配下のテンプレート修正で画面の見た目を修正できる

src/router

→配下のindex.jsでルーティングを追加・変更可能

src/viewsにテンプレートファイルを追加

＜ファイル名＞

TestView.vue

＜ファイルの中身＞

<template>
<div class="about">
<h1>This is an test</h1>
</div>
</template>

src/routerにルーティングを追加

＜修正するファイル名＞

index.js

＜修正内容＞

以下のように、routesの定義にtestのビューへのルートを追加します。


const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import( '../views/AboutView.vue')
  },
  {
    path: '/test',
    name: 'test',
    component: () => import('../views/TestView.vue')
  }
]

src/App.vueに新しい画面へのリンクを追加する

＜修正するファイル＞

src/App.vue

＜修正内容＞

以下のようにテストページへのリンクを追加します。

<template>
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/test">Test</router-link>
</nav>
<router-view/>
</template>