如何在 Vue.js 中创建自定义链接组件？

Question

这看起来像是普通的主/细节用例，但 Vue 文档中的示例缺少这方面的示例。我有一个邮件文件夹页面（路由/:mailbox_id），它按日期、主题等显示电子邮件表，我想要一个嵌套路由（/:message_id），当用户单击一行时显示电子邮件的文本。

我能够在 Ember (recreating this) 中执行此操作，因为 Ember 使用 JavaScript onClick 函数来处理路由并允许您设置要呈现的 HTML 元素，然后您只需将任何对象传递给子路由。

但我是 Vue.js 的新手，我一直在阅读文档，但不知道如何完成同样的事情。我不知道如何创建自定义链接组件，或者如何使用内置的 Vue <router-link>component（因为我需要它是 <tr> 而不是 <a>）都去子路由，并将消息的内容传递给它以便显示。

如果有帮助，这里有一些代码：

路由器

export default new Router({
  routes: [
    {
      path: '/:id',
      name: 'mailbox',
      component: Mailbox,
      props: true,
      children: [
        {
          path: 'mail/:id',
          name: 'mail',
          component: Mail,
          props: true
        }
      ]
    }
  ]
})

组件：Mailbox.vue

<template>
  <div>
    <table>
      <tr>
        <th>Date</th>
        <th>Subject</th>
        <th>From</th>
        <th>To</th>
      </tr>
      <Mail-List-Item v-for="message in messages" :key="message.id" v-bind:message="message"/>
    </table>
    <router-view></router-view>
  </div>
</template>

<script>
  import MailListItem from './Mail-List-Item'

  export default {
    components: { 'Mail-List-Item': MailListItem },
    name: 'Mailbox',
    props: ['messages']
  }
</script>

组件：Mail.vue

<template>
  <div class="mail">
    <dl>
      <dt>From</dt>
      <dd>{{mail.from}}</dd>
      <dt>To</dt>
      <dd>{{mail.to}}</dd>
      <dt>Date</dt>
      <dd>{{messageDate}}</dd>
    </dl>
    <h4>{{mail.subject}}</h4>
    <p>{{mail.body}}</p>
  </div>
</template>

<script>
export default {
  props: ['message', 'messageDate']
}
</script>

组件：Mail-List-Item.vue

<template>
    <V-Row-Link href="mail" mailid="message.id" message="message">
      <td>{{messageDate}}</td>
      <td>{{message.subject}}</td>
      <td>{{message.from}}</td>
      <td>{{message.to}}</td>
    </V-Row-Link>
</template>

<script>
  var moment = require('moment')
  import VRowLink from './V-Row-Link'

  export default {
    name: 'Mail-List-Item',
    props: ['message'],
    components: { VRowLink },
    data: function () {
      return {messageDate: moment(this.message.date).format('MMM Do')}
    }
  }
</script>

组件：V-Row-Link.vue（其中大部分复制自 this repo）

<template lang="html">
  <tr
    v-bind:href="href"
    v-on:click="go"
    >
      <slot></slot>
  </tr>
</template>

<script>
import routes from '../Router'

export default {
  props: ['href', 'mailid', 'message'],
  methods: {
    go (event) {
      this.$root.currentRoute = this.href
      window.history.pushState(
        null,
        routes[this.href],
        this.href
      )
    }
  }
}
</script>

Answer 1

路由器链接采用tag attribute，您可以使用它来将其转换为您喜欢的任何元素。一个例子是......

<router-link tag="tr" :to="'/messages/' + MAIL_ID">{{ MAIL_TITLE }}</router-link>