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

Question

这似乎是您的运行-of-the-mill master/detail 用例，但 Vue 文档中的示例缺少这方面的示例。我有一个邮件文件夹页面（路由 /:mailbox_id），它按日期、主题等显示 table 封电子邮件，我想要一个显示电子邮件文本的嵌套路由 (/:message_id)当用户点击一行时。

我能够在 Ember (recreating this) 中做到这一点，因为 Ember 制作了一个 JavaScript onClick 函数来处理路由并允许您设置 HTML 元素来渲染，然后你只需将任何对象传递给子路由。

但我是 Vue.js 的新手，我一直在浏览文档，但无法理解如何完成同样的事情。我不知道如何创建自定义 link 组件，或者如何使用内置的 Vue <router-link> 组件（因为我需要它是 <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>

组件：邮件列表-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

Router link 接受一个 tag attribute，你可以用它把它变成你喜欢的任何元素。一个例子是...

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

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

How to create a custom link component in Vue.js?

vue.js

vue-router

vue-component

vuejs2