[VUE.JS] How to Pass Data in Vue Router

This article explains how to pass data to pages displayed on different routes (non-parent-child) in Vue.js, not just between components.

While there are other methods, such as using Vuex, here I'd like to introduce two types: 'params' and 'query'.

PASSING DATA USING $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}
  ]
})

When routing, the value passed to `:id` in the path is stored in `$route.params.id`.

Example: When navigating to the profile page, `profileId` is passed.

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>'

By the way, it's also possible to directly write the URL. This might be a more intuitive way to write it compared to using `name` and `params`.

text

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

PASSING DATA USING PROPS

By enabling `props` in the route configuration, you can pass values directly to the component's 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をアクティブ化
  ]
})

This method involves more steps compared to using values stored directly in `$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
                }
            });
        },
    }
}

PASSING DATA USING QUERY

It is stored within `$route`. In the example below, you can retrieve the passed query using `$route.query.id`.

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

PASSING DATA USING QUERY - PART 2

With `$route.query`, you can also retrieve query parameters included in the 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)

Although not explained here, you can also retrieve hash values using `$route.hash`.

→ Reference: [VUE.JS] How to Link to Page Anchors when Using Vue Router

Additionally, there are various other methods, such as designing a structure where data always passes through a parent component and handling it as data transfer between components.

RECOMMENDED VUE.JS BOOKS

While I do read books, I really feel that implementing things in a practical setting leads to deeper learning.

Conversely, if you focus too much on implementation, you might stop thinking about better coding practices, so I recommend rereading books.

For those with some knowledge of JavaScript and Vue.js.

📦

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

Vue.js frontend development book

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