[VUE.JS]Vue Routerでのデータの受け渡しの方法

Vue.jsのコンポーネント間ではなく、違うルートで表示されるページ(非親子)にデータを渡したい時の方法です。
他にもVUEXを使う方法等もありますが、ここでは「params」と「query」の二種類を紹介したいと思います。

参考 ルートコンポーネントにプロパティを渡す

$routeを使用したデータの受け渡し

まずは$route内に格納して使用する場合です。

//プロフィールページのroutingの設定 $routeの場合

const Profile= {
    template: '<div>Profile No.{{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/profile/:id',name='profilePage', component: Profile}
  ]
})

ルーティングする際に、:idに渡した値が$route.paramus.idに格納されています。

例)プロフィールページに遷移した際、profileIdが渡される

// 遷移元ページからリンク

<router-link :to="{
    name: 'profilePage',
    params: { id: profileId }
}">
    プロフィールページリンク
</router-link>

・・・

export default{
    data: function(){
        return {
            profileId: 999,
        }
    }
}

PROPSを使用したデータの受け渡し

routeの設定でPROPSを使用できるようにすることで、propsに値を渡すことができます。

//プロフィールページのroutingの設定 PROPSの場合

const Profile= {
  props: ['id'],     //propsを設定
  template: '<div>Profile No.{{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/profile/:id',name='profilePage', component: Profile, props: true}     //propsをアクティブ化
  ]
})

$routeに格納されているものを使用するよりも手間が増えます。
リンク時のパラメータの渡し方は$routeと同様です。

サンプルでは関数を使ってみました。

// 遷移元ページからリンク

<div @click="moveProfilePage()">プロフィールページリンク</div>

・・・

import Router from 'Router.vue'
export default{
    data: function(){
        return {
            profileId: 999,
        }
    },
    methods: {
        moveProfilePage: function(){
            Router.push({
                name: 'profilePage',
                params: {
                    id: this.profileId
                }
            });
        },
    }
}

queryを使用したデータの受け渡し

ルーティングする際にqueryとしてデータを渡します。
$route内に格納されます。下記の例ですと、$route.query.idで渡されたqueryを取得することができます。

例)

// 遷移元ページからリンク

<router-link :to="{
    name: 'profilePage',
    query: { id: profileId }
}">
    プロフィールページリンク
</router-link>

・・・

export default{
    data: function(){
        return {
            profileId: 999,
        }
    }
}

例)データの取得

//遷移先ページ
export default{
    data: function(){
        return {
            profileId: this.$route.query.id,
        }
    }
}

URLにqueryを付けることでも渡せます

普通にURLにqueryを付けることで同様に取得することができます。

<router-link to="/profile?profileId=999">
    プロフィールへ
</router-link>

// 遷移先で
$route.query.profileId
で取得。

 

補足:私もよくつけ忘れるのですが、export内で使う場合は<code>this.$route…</code>になります。
そのほか、親コンポーネントを必ず通す作りにしてコンポーネント間のデータの受け渡しとして処理するとかいろいろ方法はあります。