Vue.jsでカスタムリンクコンポーネントを作成する方法は？

Question

これは、あなたの常識的なマスター/ディテールの使用例のようですが、Vueドキュメントの例ではこれの例はあまりありません。私はメールフォルダのページ（ルート/:mailbox_id）は、日付、件名などの電子メールのテーブルを表示し、ユーザーが行をクリックしたときに電子メールのテキストを表示するネストされたルート（/:message_id）が必要です。

Emberがルーティングを処理するJavaScript onClick関数を作成し、HTML要素をレンダリングするように設定してから、子ルートにオブジェクトを渡すだけなので、Ember（recreating this）でこれを実行できました。

しかし、私はVue.jsを初めて使っています。私はドキュメントを読んできましたが、同じことを達成する方法を見つけることはできません。カスタムルートコンポーネントを作成する方法や組み込みのVue <router-link>コンポーネントを使用する方法を理解することはできません（<a>の代わりに<tr>にする必要があるため）、両方とも子ルートに移動して渡しますメッセージの内容を表示することができます。

ルータ

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="tr" :to="'/messages/' + MAIL_ID">{{ MAIL_TITLE }}</router-link>