【Vue.js】vue-routerでPOSTやGETと同じようなパラメーターの渡し方

はじめに

こんにちは。エンジニアの仕事をしている、たかふみです。

今日はPHPなどのサーバーサイド言語でよく使う、POSTやGETのようなパラメーターの渡し方をVue.jsのvue-routerではどのように処理するのかまとめていきたいと思います。

ルーティング設定

今回の記事で、使用するルーティングをまず公開します。
main.jsなどで設定する、ルーティング設定です。
Topのページがあって、Userのページに遷移するイメージです。

ファイル名を router.js とします。

import {createRouter,createWebHashHistory} from 'vue-router'

export default createRouter({
    history:createWebHashHistory(),
    routes:[
        {
            path:'/root',
            name:'top',
            component: () => import(
                /* webpackChunkName: "routes" */
                /* webpackMode: "lazy-once" */
                `../pages/Top/Top.vue`
                )
        },
        {
            path:'/users',
            name:'user',
            // props:true,
            component: () => import(
                /* webpackChunkName: "routes" */
                /* webpackMode: "lazy-once" */
                `../pages/User/Index.vue`
                )
        },
    ]
})

GET渡し

サーバーサイド言語で言うGETのようなパラメータ渡しの方法です。

画面遷移するrouter-link :to=の値に、queryを設定すれば、それがパラメーターとなります。

下記の例は、トップページからhttp://localhost/#/user?id=1と、GETのような値で渡す方法です。

/pages/Top/Top.vue

<template>
    <router-link :to="{name:'user',query:{id:1}}">to user</router-link>
</template>

/pages/User/Index.vue

<script setup>
import {useRoute} from 'vue-router'
const route = useRoute()
const { id } = route.query
// Top画面で設定した http://localhost/#/user?id=1　のidの値を取得できる
console.log(id)
</script>

POST渡し

POSTのように、URLのクエリには値を出力したくないが、画面遷移時にパラメータを渡したい場合です。

以下のようにparamsへオブジェクトを渡したものが値となります。

/pages/Top/Top.vue

<template>
   <!--queryはGET、paramsはPOST的な渡し方-->
    <router-link :to="{name:'user',params:{id:1}}">to user</router-link>
</template>

/pages/User/Index.vue

<script setup>
import {useRoute} from 'vue-router'
const route = useRoute()
const { id } = route.params
console.log(id)
</script>

コンポーネントのパラメーターに値を渡したい場合

もしも、コンポーネントのpropsの値を渡したい場合はどうすればいいのでしょうか。

まず、ルーティングのpropsをtrueに設定する必要があります。

router.js

import {createRouter,createWebHashHistory} from 'vue-router'

export default createRouter({
    history:createWebHashHistory(),
    routes:[
        {
            path:'/root',
            name:'top',
            component: () => import(
                /* webpackChunkName: "routes" */
                /* webpackMode: "lazy-once" */
                `../pages/Top/Top.vue`
                )
        },
        {
            path:'/users',
            name:'user',
            // コンポーネントにPOSTのような値を渡したければ、props:trueに設定
            props:true, 
            component: () => import(
                /* webpackChunkName: "routes" */
                /* webpackMode: "lazy-once" */
                `../pages/User/Index.vue`
                )
        },
    ]
})

値を送信する側は、POST的な渡し方と、特に変更はありません。

/pages/Top/Top.vue

<template>
    <!--queryはGET、paramsはPOST的な渡し方-->
    <router-link :to="{name:'user',params:{id:1}}">to user</router-link>
</template>

コンポーネントのpropsを見れば、値が渡されていることを確認できます。

/pages/User/Index.vue

<script setup>
const props = defineProps({
    id: String
})
console.log(props.id)
</script>

まとめ

以上になります。

Vue.jsのルーティングのパラメータ渡しは、PHPやJavaなどのサーバーサイド言語を経験していれば、わかりやすいですね。

開発の参考にしていただければと思います。