今回はページを変えるためのルーティングについて。
Vue.jsのプラグインである【Vue Router】を使用して行いたいと思います。
今回もCDNで行いますので、まずheadに以下を追加します。（基本のVue.jsのCDNはすでにある前提です。）
<script src="https://unpkg.com/vue-router@2.7.0/dist/vue-router.min.js"></script>- Vue Routerでのリンク定義は【router-link】を使用します。
- 切り替えたページの内容は【router-view】で囲まれた範囲に表示されます。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページャーテスト</title>
<style>
[v-cloak] {
display: none /* テンプレートの{{}}を非表示にする */
}
</style>
</head>
<body>
<div id="app">
<nav v-cloak>
<router-link to="/top">トップ</router-link>
<router-link to="/page2">2ページ目</router-link>
<router-link to="/page3">3ページ目</router-link>
</nav>
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router@2.7.0/dist/vue-router.min.js"></script>
</body>
</html>
JavaScript
var router = new VueRouter({
routes: [
{
path: '/top',
component: {
template: '<div>トップページです。</div>'
}
},
{
path: '/page2',
component: {
template: '<div>2ページ目です。</div>'
}
},
{
path: '/page3',
component: {
template: '<div>3ページ目です。</div>'
}
},
{
// 定義されていないパスへの対応。トップページへリダイレクトする。
path: '*',
redirect: '/top'
}
]
})
var app = new Vue({
router: router
}).$mount('#app')
結果
以下のリンク先でサンプルを作成しております。
同じindexでページリンクができているかと思います。