如何在Vue.js中創建自定義鏈接組件？

Question

這看起來像您的普通用例/詳細用例，但Vue文檔中的示例停止使用示例。我有一個郵件文件夾頁面（路線/:mailbox_id），它按日期，主題等顯示電子郵件表格，我想要一個嵌套路線（/:message_id），用戶在單擊某行時顯示電子郵件的文本。

我能夠在Ember（recreating this）中執行此操作，因爲Ember使用JavaScript onClick函數來處理路由並允許您設置HTML元素進行渲染，然後您只需將任何對象傳遞給子路由。

但我是Vue.js的新手，我一直在閱讀文檔，但不知道如何完成相同的事情。我無法弄清楚如何創建一個自定義鏈接組件，或者如何使用內置的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-行-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="tr" :to="'/messages/' + MAIL_ID">{{ MAIL_TITLE }}</router-link>