[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使用時にページ内アンカーにリンクする方法

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

VUE.JSおすすめの書籍

書籍は読む方だと思いますが、やはり現場で実装するとより深く学べるのを実感します。
逆に実装中心だと、より良いコーディングを考えることができなくなるので書籍もあらためて読むことをおすすめします。

これからはじめるVue.js実践入門
JavaScript、Vue.jsの知識がある程度ある方向け

Vue.jsのツボとコツがゼッタイにわかる本
初心者向け

#JavaScript #Vue #Vue Router