routes - Nuxt：使用组件作为链接

Question

我想将我的JobPost组件用作链接，因此无论何时单击它都会导致正确的描述。

<JobPost
  v-for="job in jobs"
  :key="job.id"
  :details="job.post"
  :to="{ name: 'job', params: { id: job.id } }"
/>

我有这个。我的问题是如何使它链接？

我试图用它来包装它，nuxt-link但这样我又得到了一个JobPost组件

<nuxt-link
  v-for="job in jobs"
  :key="job.id"
  :to="{ name: 'job', params: { id: job.id } }"
>
  <JobPost :details="job.post" />
</nuxt-link>

标签： routesnuxt.js

Answer 1

我认为这个样本可能适合您的问题：

import {action} from '@storybook/addon-actions'
// import VueRouter  from 'vue-router' - not needed
// import NuxtLink from 'nuxt/lib/app/components/nuxt-link' - not needed

Vue.component('RouterLink', {
  props:   ['to'],
  methods: {
    log() {
      action('link target')(this.to)
    },
  },
  template: '<div @click="log()"><slot>RouterLink</slot></div>',
})

Vue.component('NuxtLink', {
  props:   ['to'],
  methods: {
    log() {
      action('link target')(this.to)
    },
  },
  template: '<div @click="log()"><slot>NuxtLink</slot></div>',
})