如何为ForEach中的每个卡添加导航链接，以便它们有自己的屏幕可转到？

// 卡组件
<template>
  <div>
    <h3>{{ title }}</h3>
    <a :href="link">点击查看详情</a>
  </div>
</template>

<script>
export default {
  props: ['title', 'link']
}
</script>

// 使用ForEach循环渲染卡组件
<template>
  <div>
    <h2>卡列表</h2>
    <div v-for="card in cards" :key="card.id">
      <card :title="card.title" :link="card.link"></card>
    </div>
  </div>
</template>

<script>
import Card from './Card.vue'

export default {
  components: {
    Card
  },
  data() {
    return {
      cards: [
        { id: 1, title: '卡1', link: '/card1' },
        { id: 2, title: '卡2', link: '/card2' },
        { id: 3, title: '卡3', link: '/card3' }
      ]
    }
  }
}
</script>