【Vue】入門編(ルーティング)

こんにちは。
本日はVue.jsの入門編です。

概要

ルーティングにはvue-routerを使用します。
CDNで読み込む、もしくはインストールする必要があります。

router.vuejs.org

サンプルコード

トップページとメインページへのルートを定義しています。
画面には、それぞれのページへのリンクも作成しています。

<router-link>タグは<a>タグとして描画されます。
<router-view>タグには、テンプレートの内容が描画がされます。

<div id="app">
    <router-link to="top">トップページ</router-link>
    <router-link to="main">メインページ</router-link>
    <router-view></router-view>
</div>

<script>
    var router = new VueRouter({
        routes: [
            {
                path: '/top',
                component: {
                    template: '<div>トップページ</div>'
                }
            },
            {
                path: '/main',
                component: {
                    template: '<div>メインページ</div>'
                }
            }
        ]
    })

    var vm = new Vue({
        router: router
    }).$mount('#app')
</script>

以上です。