Question

我有两个组件的总线列表和总线配置文件。总线列表中包含几个称为总线的图标。当我单击总线图标时，必须通过api请求传递对象项。 item对象看起来像这样：

项目：{“ id”：1，“ bus_number”：“ xx-xx-xxx”，“ bus_color”：“黑色”}

这是我的代码：

            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

您可以使用using (MailMessage mail = new MailMessage()) { mail.From = new MailAddress(fromAddress); mail.To.Add(toAddress); mail.Subject = subject; mail.Body = body; mail.IsBodyHtml = true; using (SmtpClient smtp = new SmtpClient()) { smtp.Host = "smtp.gmail.com"; smtp.Port = 587; smtp.EnableSsl = true; smtp.DeliveryMethod = SmtpDeliveryMethod.Network; smtp.UseDefaultCredentials = false; smtp.Credentials = new NetworkCredential(fromAddress,fromPassword); smtp.Send(mail); } }将其他数据传递到路线：

query

，然后您可以使用<router-link :to="{ path: bus.url + data.item, query: { item: { "id": 1, "bus_number": "xx-xx-xxx", "bus_color": "black" } } }">访问它们。

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

搜索“查看发送对象路由器的链接” ，然后查看documentation或观看来自vueschool的视频。

通过routerlink Vuejs传递对象

2 个答案: