vue.jsの拡張ライブラリであるVue Routerを利用することでシングルアプリケーションを構築することができます。

Vue Routerを利用してシングルアプリケーションを構築すると更新が必要な箇所のみ内容の書き換えが行われるため、ページを移動するたびにすべてのページの情報を読み込む必要がありません。そのため、ページの移動をスムーズに行うことができます。

本文書では、Vue Routerをはじめて使う人がVue Routerの基本設定に集中できるようにcdnを使って動作確認を行います。そのためVue Routerを利用するまでのvue.jsの環境設定を行う必要はありません。

手元のPCのデスクトップにindex.htmlを作成しそのファイルにコードを追加することでVue Rourceの基本を理解することができます。特別な環境はいりません。

Vue Routerを使ったページの更新

vue.jsとVue Routerのcdnの読み込み

任意の場所にhtmlファイルを作成してください。ここではindex.htmlファイルをデスクトップに作成します。

作成したindex.htmlファイルに下記のhtml文を記述し、scriptタグを使ってvue.jsとVue Routerを読み込みます。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue Router</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>

<script>
</script>
</body>
</html>

vue.jsのデータの表示

vue.jsが正常に動作するのか確認をしておきましょう。index.htmlのbodyタグの中に<div id=”app”></div>を追加します。次にscriptタグの中でVueインスタンスを作成し、データプロパティのtitleをブラウザに表示させます。


<body>
	<div id="app">
		<h1>{{ title }}</h1>
	</div>
<script>
	var app = new Vue({
		el: '#app',
		data:{
			title: "Vue Resource"
		}
	});
</script>

下記の画面が表示されたら、vue.jsは正常に動作しています。cdnを使ってvue.jsが動作することが確認できたのでVue Routerの設定を行います。

vue.jsのデータプロパティ表示
vue.jsのデータプロパティ表示

Vue Routerコンポーネント

Vue Routerライブラリではrouter-link、router-viewコンポーネントを利用します。

  • router-linkタグはリンクを作成するために使用します。
  • router-viewタグは、それぞれのリンク先に紐づいた内容を表示するために使用します。

Vue Routerでルーティング設定を行う必要がありますが、先に設定後のブラウザの表示画面を使ってrouter-link, router-viewタグと実際に表示される内容を確認します。

矢印が示すようにrouter-linkはホーム、ニュース、Aboutのページのリンクに関連しています。router-viewは”初めてのVue Resource”に矢印が向けられているようにそのページに表示させる内容に関連しています。

routerタグ
routerタグ

記述した下記のHTML文と上記の図を比較しながらrouter-linkタグとrouter-viewタグがどのように使用されるのかを確認していきます。


<div id="app">
  <h1>{{ title }}</h1>
  <nav>
    <router-link to="/">ホーム</router-link>
    <router-link to="/news">ニュース</router-link>
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</div>

HTML文を見てもrouter-linkタグはホーム、ニュース、Aboutのリンクを作成していることがわかります。

router-viewタグはタグは存在しますが、ブラウザ上に表示されている内容”初めてのVue Resource”に関連していることはこのHTML文を見ただけではわかりません。

router-viewタグの中身はJavaScript側で制御されているので次はJavaScript側(scriptタグ)を確認します。

ルーティングのためのscriptタグの中身

router(ルーター)、ルーティングという言葉が出てきていますが、これはあるURLに対してブラウザがアクセスしてきた場合に何を表示させるかを設定することです。今回だと”/(ルート)”、”/news”、”/about”にアクセスがあった場合にブラウザにそれぞれのページに関連する内容を表示させるかをルーティングを使って行います。

scriptタグの中では大きく3つのパートに分けて設定を行なっています。


// (1)コンポーネントの設定
const Home = { template: '<div>初めてのVue Resource</div>'}
const News = { template: '<div>今週のニュースは....</div>'}
const About = { template: '<div>会社までのアクセス方法は....</div>'}

// (2)ルーティングの設定
const router = new VueRouter({
	routes : [
		{path:'/', component : Home},
		{path:'/news',component: News},
		{path:'/about',component: About}
	]
})

//(3)Vueインスタンスへrouterインスタンスを渡す
var app = new Vue({
	el: '#app',
	data:{
		title: 'Vue Resource',
	},
	router,
});
  1. コンポーネントの設定を行なっています。各コンポーネントのtemplateプロパティに表示させたいHTMLを記述しています。
  2. ルーティングの設定を行っています。”/(ルート)”にアクセスがあったら、Homeコンポーネントを表示、”/news”にアクセスがあったらNewsコンポーネントを表示といったようにパスと表示させる内容を紐づけています。
  3. 作成したVeu RouterインスタンスをVueインスタンスに渡しています。

ここまでの設定が完了するとrouter-viewタグを記載した場所には、設定したコンポーネントの内容が表示されます。

“/(ルート)”へアクセスがあれば、router-viewの場所には、”初めてのVue Resource”が表示されます。”/news”にアクセスがあれば、router-vierwの場所には、”今週のニュースは….”が表示されます。

実際にブラウザで確認を行うとルートへのアクセスは下記のように”初めてのVer Resource”が表示されます。

/(ルート)へのアクセス
/(ルート)へのアクセス

ニュースの文字をクリックすると下記の画面が表示されます。この時表示が変更になる際にページの全体の読み込みが行われずスムーズにrouter-viewの中身が更新されるのを確認してください。

/newsへのアクセス
/newsへのアクセス

またページが移動しているURLを確認してください。newsだとlocalhost:8080/#/newsになっています。

#(ハッシュ)が表示されているのは、Vue Routerがデフォルトのハッシュモードで動作しているためです。この他にhistory(ヒストリー)モードに変更すると#が消えますが、サーバ側の設定が必要となるため、ここではデフォルトのハッシュモードから変更を行いません。もし今回の環境でhistoryモードに変更するとアクセス先が/about, /newsになりファイルが存在しないというエラーになります。

/newsと同じように/aboutにもアクセスします。

/aboutへのアクセス
/aboutへのアクセス

本文書ではVue Routerの基本設定を理解するためにindex.htmlファイル1つを使って動作確認を行なってきました。実際にvue.jsのプロジェクトでシングルアプリケーションを作成する場合は、コンポーネンントも個別のコンポーネントファイル(.vue)に分け、ルーティングの設定箇所はrouter.jsのファイルに分けることになります。しかし、今回説明した基本がわかっていればファイルが分割されたとしてもどのファイルがどのような働きをするのかわかっているので難しくないはずです。

下記の文書ではvue-cliコマンドを使って作成したプロジェクトでのVue Routerの設定方法について説明を行っています。