【作って学ぶ】初心者でもできるVue.jsを使ったポートフォリオの作り方〜Routerとページリンク編〜

はじめに

今回はVue.jsを使ってポートフォリオを作成する方法を紹介します。

開発環境の構築からコーディングなど数回に分けて紹介していきますので、ぜひご覧ください。

前回からの続きになります。

前回の記事はコチラ↓

さて、今回のテーマは「Routerとページリンク編」です。参りましょう！！

Routerについて

今回のテーマでは「Routerの設定」つまり「どのURLでどのページを表示するか」について設定をしていきます。

前回の記事で作成したページ設計図をもとに、どのページがどのURLで表示されるかを設定していきますので、ページ設計図を準備してください。

Routerについては上記の理解で十分ですが、もっと詳しく知りたい方はこちらをご覧ください。

コーディング

それでは早速コーディングをしていきましょう！！

こちらの記事で作成したVue.jsプロジェクトのワークスペースをVSCodeなどのテキストエディタで開いてください！

続いて、足りないファイルを作成・編集していきます。

ページファイルを配置するディレクトリの作成

これから各ページを作成していきますが、プロジェクトを管理する上でディレクトリを分けて管理をしていきます。

「portfolio > src」のディレクトリに新しく、「views」というディレクトリ（フォルダ）を作成してください。

プロフィールページファイルの作成

先ほど作成した「src > views」フォルダの中にファイルの新規作成から「Profile.vue」という名前のファイルを作成してください。

作成したファイルを次のように編集して保存してください。

<template>
  <div id="profile_container">
    プロフィールページ
  </div>
</template>

ギャラリーページファイルの作成

先ほど作成した「src > views」フォルダの中にファイルの新規作成から「Gallery.vue」という名前のファイルを作成してください。

作成したファイルを次のように編集して保存してください。

<template>
  <div id="gallery_container">
    ギャラリーページ
  </div>
</template>

スキルページファイルの作成

先ほど作成した「src > views」フォルダの中にファイルの新規作成から「Skills.vue」という名前のファイルを作成してください。

作成したファイルを次のように編集して保存してください。

<template>
  <div id="skills_container">
    スキルページ
  </div>
</template>

ブログページファイルの作成

先ほど作成した「src > views」フォルダの中にファイルの新規作成から「Blogs.vue」という名前のファイルを作成してください。

作成したファイルを次のように編集して保存してください。

<template>
  <div id="blogs_container">
    ブログページ
  </div>
</template>

route/index.js ファイルの編集

Vue.jsプロジェクトでどのURLでどのページを表示するかを全て管理しているのがこちらのファイルになります。

portfolio > src > route > index.js の順にたどり、ファイルを開いてください。

続いて、このファイルを次のように編集してください。

import Vue from "vue";
import VueRouter from "vue-router";
import Profile from "../views/Profile.vue";
import Gallery from "../views/Gallery.vue";
import Skills from "../views/Skills.vue";
import Blogs from "../views/Blogs.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Profile",
    component: Profile,
  },
  {
    path: "/gallery",
    name: "Gallery",
    component: Gallery,
  },
  {
    path: "/skills",
    name: "Skills",
    component: Skills,
  },
  {
    path: "/blogs",
    name: "Blogs",
    component: Blogs,
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
  scrollBehavior () {
    return { x: 0, y: 0 }
  }
});

export default router;

App.vue ファイルの編集

App.vueはVue.jsプロジェクトにおいて、最も初めに表示されるページファイルになります。

こちらに書いてある内容が初めに表示され、その中身の指令によって別ページが表示されるような仕組みとなっています。

このファイルを次のように編集してください。

<template>
  <div id="app">
    <router-view />
  </div>
</template>

各ページの動作確認

ここまでで作成したページファイルやRouterの設定の動作確認を行います。

コンソールを開いて次のコマンドを入力してください。

npm run serve

コマンドを実行して次のようなURLが発行されたら、こちらのURLにブラウザからアクセスしてください。

http://localhost:8080

また、コンソールではなく、Vue UI を使ってGUIベースでテストを行うこともできます。

その方法はこちらの記事をご覧ください。

発行されるURLにアクセスして、URLを変化させ、次のように表示が切り替われば、今回の設定は完了です

• http://localhost:8080
  • プロフィールページ
• http://localhost:8080/gallery
  • ギャラリーページ
• http://localhost:8080/skills
  • スキルページ
• http://localhost:8080/blogs
  • ブログページ

終わりに

今回は『Vue.jsを使ったポートフォリオの作り方』のpart3としてRouterとページリンクについてお伝えしてきました！

次回以降では各ページの見た目などをコーディングしていきます！

お疲れ様でした！！