[VUE.JS]How to pass data between Routes

0

This is the way to pass data to pages (non-parent-child) that appear at different routes, rather than between components of Vue.js.
There are other ways to use VUEX, but i would like to introduce two types of "params" and "query" here.

See Passing Props to Route Components

Passing data using $route

First, it is stored in $route and used.

//Setting routing on profile page for $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 is stored in $route.paramus.id.

Example) ProfileId is passed when transitioning to a profile page

//Link from transition source page

<router-link :to="{
    name: 'profilePage',
    params: { id: profileId }
}">
    Profile Page Links
</router-link>

・・・

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

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

Note that it is also possible to write the URL directly, which may be more intuitive than using name and params.

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

 

Passing data using PROPS

You can pass a value to props by allowing props to be used in the route setting.

//Setting routing on profile page for PROPS

const Profile= {
  props:['id'] , //props set
  template: '<div>Profile No.{{id }}</div>'
}

//props activated
const router = new VueRouter({
  routes: [
    { path: '/profile/:id',name='profilePage', component: Profile, props: true}
  ]
})

It's more time consuming than using what's stored in the $route.
Passing parameters at the time of the link is similar to $route.

I tried to use a function in the sample.

//Link from transition source page

<div @click="moveProfilePage()">Profile Page Links</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

Pass data as a query when routing.
Stored in the $route.In the example below, you can get the query passed in $route.query.id.

Example)

//Link from transition source page

<router-link :to="{
    name: 'profilePage',
    query: { id: profileId }
}">
    Profile Page Links
</router-link>

・・・

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

Example) Retrieving data

//Transition destination page

export default{
    data: function(){
        return {
            profileId: this.$route.query.id,
        }
    }
}

Passing data using query–Part2

You can also get the query contained in the URL by using $route.query.
Example) Retrieving data

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

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

I won’t explain it here, but you can also get the hash with $route.hash.

See [VUE.JS]How to link to an anchor point when using the Vue Router

There are other ways to make sure that the parent component is passed through and treat edits as passing data between components.

VUE.JS Recommended Books

I think that you are a reader of books, but I realize that you can learn more deeply by implementing them in the field.
On the other hand, if you focus on implementation, you will not be able to think of better coding, so it is recommended that you read the book again.
Vue.js 3 Cookbook: Discover actionable solutions for building modern web apps with the latest Vue features and TypeScript