Passing object through routerlink Vuejs - vue.js

Question

I have a two component bus list and bus profile. Bus list contain several icon know as bus. when i click on bus icon it must pass object item from api requested. item object look like this:
item: { "id": 1, "bus_number": "xx-xx-xxx", "bus_color": "black" }
Here is my code:
In my Bus list.vue file
<template slot="bus" slot-scope="data">
<span class="bus" v-for="bus in buss">
<router-link :to="bus.url + data.item">
<a><i :key="data.item.id" ></i>
<a><i v-bind:class="bus.icon"></i></a>
</a>
</router-link>
</span>
</template>
In java script part
data () {
return {
buss: [
{url: '/xxxx/xxxxxx/xxxxxx/', icon: 'fa fa-bus fa-2x text-success'}
],
},
methods: {
getBusInfo: function () {
axiosWithOutAuth({
method: 'post',
url: 'xxx/xxxx/xxxx',
headers: {Authorization: 'JWT ' + localStorage.getItem('usertoken')}
}).then(response => {
console.log(response.data.results)
this.items = response.data.results
}).catch(function (error) {
console.log(error)
})
},
}
In my component file where i named as index.js
{
path: 'bus-profile/:item',
name: 'agency-bus-profile',
component: TravelAgencyBusProfile,
props: true
}
In my bus profile.vue file...
I am showing how i tried myself to access object
export default {
name: 'agency-bus-profile',
props: [item],
}
</script>
Please note that here syntax error does not matter to me. Here i am just want a know how can i directly pass object from one component to another using router link and props...

Answer 1

You can use query to pass additional data to the route:
<router-link :to="{
path: bus.url + data.item,
query: {
item: { "id": 1, "bus_number": "xx-xx-xxx", "bus_color": "black" }
}
}">
and then you can access them with this.$route.query.

Answer 2

It is easy, check this example
<router-link :to="{
path: '/path_example',
query: { // or if you want to use params: { ley1: value1, ke2: value2, ...}
item: { key: value_1, ke2: value2, ... }
}
}">
To access it from the other view use
const item = this.$router.params.item
const item = this.$router.query.item
Search "vue send object router link" and see documentation or watch a video from vueschool.