Vue

【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> 

SPA(シングルページアプリケーション)を全く意識していないものですがVueRouterの書き方でHelloWorldを出力してみました。

9行目の「router-view」タグでVueRouterを出力しています。
14行目でHelloコンポーネントを作成しています。
そのHelloコンポーネントをVueRouterのルート(/)に定義しています。

VueインスタンスのマウントはVue.js同様、idセレクターを用意してそこにマウントしています。

注意点としては、「script」タグとスクリプトは「idセレクター」より下に記述する必要があります。
逆の場合、25行目のmountでid=appが無い旨のエラーが出力されます。

参考記事

公式ページ
https://router.vuejs.org/ja/guide

  • おすすめの投稿がありません