How do I create a custom link component in Vue.js?

This is similar to your wizard / detail use / detail example, but the examples in the Vue docs do not provide examples for this. I have a Mail Folder (route /:mailbox_id

) page that displays a table of emails by date, subject, etc., and I want the nested route ( /:message_id

) to show the email text when the user clicks on a row.

I was able to do this in Ember ( recreate this ) because Ember makes a JavaScript onClick function to handle the routing and allows you to set the HTML element to render and then you just pass any objects to the child route.

But I am new to Vue.js and I go through the docs but cannot figure out how to do this. I can't figure out how to create a custom link component or how to use the built-in Vue component <router-link>

(because I need it <tr>

instead <a>

) to navigate to and step through the content of the post for it to be shown.

If that helps, here's some code:

Router

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

      

        
        
        
      

    

Component: 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>

      

        
        
        
      

    

Component: 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>

      

        
        
        
      

    

Component: 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>

      

        
        
        
      

    

Component: V-Row-Link.vue (most of this is copied from 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>