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

Vue.jsのコンポーネント間ではなく、違うルートで表示されるページ（非親子）にデータを渡したい時の方法です。

他にもVUEXを使う方法等もありますが、ここでは「params」と「query」の二種類を紹介したいと思います。

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

javascript

//プロフィールページの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が渡される

javascript

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

<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を使用するよりもこちらの方が書き方は直感的かも。

text

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

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

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

javascript

//プロフィールページの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に格納されているものを使用するよりも手間が増えます。

javascript

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

<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を使用したデータの受け渡し

$route内に格納されます。下記の例ですと、$route.query.idで渡されたqueryを取得することができます。

javascript

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

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

・・・

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

javascript

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

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

$route.queryでURLに含まれるクエリも取得できます。

php

// 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おすすめの書籍

書籍は読む方だと思いますが、やはり現場で実装するとより深く学べるのを実感します。

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

JavaScript、Vue.jsの知識がある程度ある方向け

📦

Amazon で関連書籍・ツールを検索

Vue.js フロントエンド入門

Amazonで探す →（アソシエイトリンク）