通过路由器链接Vuejs传递对象

Question

我有一个双组分总线列表和总线配置文件。总线列表包含几个名为总线的图标。当我单击总线图标时，它必须从请求的api中传递对象项。item对象如下所示：

项目：{ "id"：1，"bus_number"："xx-xx-xxx"，"bus_color"："black“}

这是我的代码：

            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>

请注意这里的语法错误对我来说并不重要。这里我只想知道如何使用路由器链接和道具直接将对象从一个组件传递到另一个组件。

Answer 1

您可以使用query向路由传递其他数据：

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

然后您可以使用this.$route.query访问它们。

Answer 2

这很简单，请查看下面的示例

<router-link :to="{
    path: '/path_example',
    query: {  // or if you want to use params: { ley1: value1, ke2: value2, ...}
        item: { key: value_1, ke2: value2, ... }
    }
}">

若要从另一个视图访问它，请使用

const item = this.$router.params.item
const item = this.$router.query.item

搜索"vue发送对象路由器链接“，然后查看文档或从军校观看视频。