【Vue.js】VueRouterとコンポーネントを使ったページ遷移

前回はテキストボックスに入力した内容をそのまま表示させました。これがVue.jsのデータバインディングです。Vue.jsではこのようなJS側とHTML側でのデータのやり取りが簡単にできます。

他にもVue.jsには得意なことがあります。それがSPAの構築です。複数の機能(テンプレート)を1つのページで再現することで、スムーズなページ遷移とそれぞれの機能(テンプレート)へのパスの割当てが実現できます。

第2章ではVueRouterというVue.jsのライブラリを使用して、SPAの構築を行います。

VueRouterとは何か
VueRouterインスタンスを作る

VueRouterとは何か

VueRouterとはVue.jsのライブラリで、複数のテンプレート構文をコンポーネントで関連付け、パスを割り当てることで複数のページに移動しているように仕立てることができます。

今回のプロジェクトで開発するポートフォリオサイトは4ページで構成させます。トップ、自己紹介、作品一覧、作品個別の4ページです。それぞれのページに共通するコードをそれぞれのHTMLにコピペしているようでは、書き換えが発生した場合、4つすべてに修正をしなければなりません

そこでVueRouterを使用します。VueRouterを使用すれば、共通のコードをひとまとめにして、異なるコードそれぞれにパスを割り当てることで複数のページを再現しつつ、修正を容易にさせることができます。

VueRouterインスタンスを作る

それでは実際にVueRouterのインスタンスを作り、複数ページのポートフォリオサイトを構成してみましょう。

let router = new VueRouter({routes:[
    { path:"/", component:Index, name:"index" },
    { path:"/info", component:Info, name:"info" },
    { path:"/work-list", component:WorkList, name:"work-list" },
    { path:"/work/:work_id", component:Work, name:"work" },
]});
app = new Vue({
    router:router
}).$mount("#app")

上部の変数routerがVueRouterのインスタンスであり、中にパスとコンポーネントが指定されています。コンポーネントとは構成要素のことで今回は下記のようにVue.extend()を使用して生成します。下記コードを先程のコードの上部に記載しましょう。

let Index = Vue.extend({
    template: "#index",
}); 
let Info = Vue.extend({
    template: "#info",
}); 
let WorkList = Vue.extend({
    template: "#work-list",
});
let Work = Vue.extend({
    template: "#work",
});

コンポーネントにはそれぞれtemplateに対応する要素を指定しています。そして、先のコードのVueRouterインスタンスでパスごとにコンポーネントが対応付けされています。

つまり、/にアクセスしたら、コンポーネントIndexのテンプレートである#indexが表示され、/infoにアクセスするとコンポーネントInfoである#infoが表示される、といった仕組みです。

index.htmlに下記のように記述してみましょう。/にアクセスしたら、router-viewタグの部分にインデックスと表示されます。/infoにアクセスすると情報とが表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>My Portfolio Site</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.2.1/vue-router.js"></script>
</head>
<body>

    <header>
        <h1>My Portfolio Site</h1>
    </header>

    <main id="app">
        <router-view></router-view>
    </main>

    <template id="index">
        <div>インデックス</div>
    </template>

    <template id="info">
        <div>情報</div>
    </template>

    <template id="work-list">
        <div>作品リスト</div>
    </template>

    <template id="work">
        <div>作品個別</div>
    </template>

	<script src="script.js"></script>
</body>
</html>

しかし、いずれもheaderタグは共通して表示されています。このようにコードをひとまとめにすることで修正を容易にすることが可能になります。