Passing object through routerlink Vuejs

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

Passing this kind of data in the route object defeats the purpose of a router: That the URL should determine the state of the application. — Aldarund
– Aldarund, Commented Jul 7, 2018 at 12:27

Julian Paolo Dayag · Accepted Answer · 2018-07-07 20:56:32Z

4

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.

answered Jul 7, 2018 at 20:56

Julian Paolo Dayag

3,7473 gold badges24 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Suvin Nimnaka Sukka Over a year ago

<router-link :to="{        path: bus.url + data.item,         params: {              "id": 1, "bus_number": "xx-xx-xxx", "bus_color": "black"          }     }">

Works fine too

DarckBlezzer · Accepted Answer · 2020-06-06 21:42:41Z

0

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.

answered Jun 6, 2020 at 21:42

DarckBlezzer

4,8141 gold badge45 silver badges53 bronze badges

Collectives™ on Stack Overflow

Passing object through routerlink Vuejs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related