こういった要望に答えます。
筆者は、最近、仕事でVue.jsを使ってシングルページアプリケーションを構築したので、信頼していただける記事かなと思います。
この記事はVue CLIを使った開発環境構築方法で作ったVueアプリケーションの雛形を元に解説していますので、まずは雛形を作成してから読み進めていただくと分かりやすいと思います。
事前準備
シングルページアプリケーションの雛形を作成すると、「Home」「About」の2ページが初期ページとして存在していますが、今回はここに「NewPage」というページを追加していきます。
画面確認用にローカルサーバを立ち上げておきましょう。
1 | npm run serve |
「NewPage.vue」を作成→編集する
ページに相当するファイルはviewsディレクトリ内に作成します。今回は「NewPage」というページを追加するので、「NewPage.vue」というファイルをviewsディレクトリ内に作成しましょう。
「NewPage.vue」内に記述したものが、実際にページに反映されるコンテンツになります。.vue拡張子ファイル内は<template>、<script>、<style>のブロックで構成されます。今回は以下のように書きます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <template> <div> <h1>New Page</h1> </div> </template> <style lang="scss" scoped> h1 { color: #f00; } </style> <script> </script> |
これで表示するページのコンテンツが作成できました。
「router.js」を編集する
次にrouter.jsを編集します。router.jsにはリソースのURLに紐づくコンポーネント(今回の場合はNewPage.vueのこと)を指定します。
ここが通常のWebサイトとシングルページアプリケーションの異なることろです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | export default new Router({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ './views/About.vue') }, // カンマを追加 { // 追加 path: '/newpage', // 追加 name: 'newpage', // 追加 component: () => import('./views/NewPage.vue') // 追加 } // 追加 ] }) |
これで、NewPageのリンクを設定する準備が整いました。あとは、NewPageへのリンクを設定するのみです。もう少しなので頑張りましょう。
「App.vue」を編集する
NewPage.vueを表示するために、「App.vue」にリンクを設置します。
1 2 3 4 5 6 7 8 9 10 | <template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> | <!-- 「｜」(パイプ)を追加 --> <router-link to="/newpage">NewPage</router-link> <!-- 追加 --> </div> <router-view/> </div> </template> |
リンクの設置が完了しました。
実際にページで動作を確認してみましょう。
以下のように表示されましたか？
