【Vue.js 2.9】はじめてのVue Router 環境構築・HelloWorld出力

・Vue.jsでSPAを構築するのに特化した公式ライブラリの紹介
・環境構築とページにHelloWorld出力

はじめに

今回からはVue.jsから少し離れて、公式ライブラリやフレームワークなどのアウトプットを行う予定です。
第一弾として、公式ライブラリであるVue Routerの紹介となります。

【Vue.js 2.9】はじめてのVue.js フォーム入力修飾子・フォーム入力バインディングの修飾子紹介。・lazy,trim,number はじめに今回はフォーム入力項目の双方向バ...

Vue Routerとは

Vue Routerとは、Vue.jsが作成したライブラリでありSPA（シングルページアプリケーション）の作成を手軽に出来ることを目的としています。

ライブラリの立ち位置であるため根本的な考えはVue.jsと変わらないです。

環境情報

名前	詳細
Vue.js	開発バージョン（`https://unpkg.com/vue/dist/vue.js`）
Vue Router	開発バージョン（https://unpkg.com/vue-router/dist/vue-router.js）
エディタ	VSCode（https://code.visualstudio.com/）

環境構築について

Vue.jsのベースはJavaScriptであるためVue.jsやVue Routerのソフトウェアも無く何かをインストールするとかはありません。
そのため、VSCodeやメモ帳などコードが書けるソフトウェアを用意いただければVue Routerは動作します。

HelloWorld出力

コンポーネントにはテンプレートと似ていて、グローバルとローカルが存在します。
まず始めにグローバルです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello Vue Router</title>
    </head>
    <body>
        <div id='app'>
            <router-view></router-view>
        </div>

        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <script>
            const Hello = { template: '<div><h1>Hello World</h1></div>' }
            const router = new VueRouter({
                routes: [
                {
                        path: '/',
                        component: Hello
                    }
                ]
            })
            const app = new Vue({
                router: router
            }).$mount('#app')
        </script>
    </body>
</html>