[VUE.JS]How to pass data between Routes

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

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

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