[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}
  ]
})

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

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

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

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

・・・

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

// profile page view
<div>Profile No.999</div>'

ちなみに、URLを直接記述することも可能です。nameとparamsを使用するよりもこちらの方が書き方は直感的かも。

// direct write URL
<router-link to="/profile/999"> // not :to
    profile page link
</router-link>

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,
        }
    }
}

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

$route.queryでURLに含まれるクエリも取得できます。
例）データの取得

// URL
https://forsmile.jp/profile?profileId=999&selectedColor=green

// 999 , green
console.log(this.$route.query.profileId)
console.log(this.$route.query.selectedColor)

ここでは説明しませんがハッシュに関しても$route.hashで取得できます。

→参考[VUE.JS]Vue Router使用時にページ内アンカーにリンクする方法

そのほか、親コンポーネントを必ず通す作りにしてコンポーネント間のデータの受け渡しとして処理するとかいろいろ方法はあります。