Vue.js에서 사용자 지정 링크 구성 요소를 생성하는 방법

Vue.js에서 사용자 지정 링크 구성 요소를 생성하는 방법

이것은 당신의 일상적인 마스터/디테일 사용 사례처럼 보이지만, Vue 문서의 예는 이에 대한 예에 미치지 못한다.메일 폴더 페이지(경로)가 있음/:mailbox_id날짜, 제목 등을 기준으로 전자 메일 테이블을 표시하는 중첩된 경로()./:message_id사용자가 행을 클릭할 때 전자 메일의 텍스트를 표시하는 것.

Ember가 JavaScript onClick 기능을 만들어서 라우팅을 처리하고 HTML 요소를 렌더링할 수 있게 해주면 어떤 물체든 자식 경로에 전달하면 되기 때문에 Ember에서 이것을 할 수 있었다.

하지만 나는 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
        }
      ]
    }
  ]
})

구성 요소: 사서함.부에를 하다

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

구성 요소: 메일.부에를 하다

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

구성 요소: 메일-목록-항목.부에를 하다

<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(이 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>

라우터 링크는 태그 속성을 가져와서 원하는 요소로 변환하는 데 사용할 수 있다.예를 들면...

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

참조URL: https://stackoverflow.com/questions/43597855/how-to-create-a-custom-link-component-in-vue-js