【Vue.js 2.9】はじめてのVue Router ルート・名前付きルート

・URLパラメーターの出力方法
・名前付きルートの設定方法

はじめに

今回はVue Routerのリンクの設定とURLパラメーターを画面に出力する方法の紹介が主となります。

【Vue.js 2.9】はじめてのVue Router 環境構築・HelloWorld出力・Vue.jsでSPAを構築するのに特化した公式ライブラリの紹介・環境構築とページにHelloWorld出力はじめに今...

環境情報

名前	詳細
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/）

リンク設定とURLパラメーターの出力

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello Vue Router</title>
    </head>
    <body>
        <div id='app'>
            <router-link to='/top'>Go to Top</router-link> / 
            <router-link to='/users/123'>Go to User</router-link>
            <hr>
            <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 Top = { template: '<div><h2>Top</h2></div>' }
            const User = { template: '<div><h2>User {{$route.params.userId}}</h2></div>' }
            const router = new VueRouter({
                routes: [
                    {
                        path: '/top',
                        component: Top
                    },
                    {
                        path: '/users/:userId',
                        component: User
                    }
                ]
            }) 
            const app = new Vue({
                router: router
            }).$mount('#app')
        </script>
    </body>
</html>

リンクの設定は「router-link」タグのtoオプションを利用しています。
toオプションで設定したリンク先が、20行目のVue側で設定したpathと一致した場合それに紐づくコンポーネントが呼ばれます。

URLパラメーターの出力には、パラメーターがあっても一致するようなpath設定が必要です。
動的なマッチングには26行目の「path: ‘/users/:userId’」の「:userId」のようにコロンと変数を用いることで、「/users」配下のリンクにマッチングする設定としています。

その後、「/users」配下のパラメーターを画面に出力する場合は18行目の「{{$route.params.userId}}」を用いることでURLパラメーターを取得することが出来ます。

名前付きルート

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Name Vue Router</title>
    </head>
    <body>
        <div id='app'>
            <router-link to='/top'>Go to Top</router-link> / 
            <router-link :to='{name: "user", params: {userId: 123 }}'>Go to User</router-link>
            <hr>
            <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 Top = { template: '<div><h2>Top</h2></div>' }
            const User = { template: '<div><h2>User {{$route.params.userId}}</h2></div>' }
            const router = new VueRouter({
                routes: [
                    {
                        path: '/top',
                        component: Top
                    },
                    {
                        path: '/users/:userId',
                        name: 'user',
                        component: User
                    }
                ]
            })
            const app = new Vue({
                router: router
            }).$mount('#app')
        </script>
    </body>
</html>