Vue

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

基本的な動きは先ほどと同じであり、違いは10行目と27行目のみです。
リンクの設定は「router-link」タグのtoオプションでURLを直打ちする方法もありますがパスが変更になった際の修正を考えると名前を用意しておけば変更箇所が少なくなります。

名前付きルートの設定で注意すべきは10行目の「router-link」タグのtoオプションではなく「:to」オプションを使います。

参考記事

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

VueRouter基本ルーティング記法まとめ
https://www.ritolab.com/entry/181

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