vue3 点击卡片跳转页面

在 Vue3 中，你可以使用 `router-link` 组件来实现点击卡片跳转页面的功能。这个组件是 Vue-Router 库提供的，用于实现页面间的路由导航。

首先，你需要安装 Vue-Router 库，并在 main.js 中引入和使用它。然后，在模板中使用 `router-link` 组件来创建一个链接，将其包裹在你的卡片组件的外部。

示例代码如下：

<template>
  <div class="card" >
    <router-link :to="{ name: 'CardDetail', params: { id: card.id } }">
      <img :src="card.imageUrl" alt="card image">
      <h3>{{ card.title }}</h3>
      <p>{{ card.description }}</p>
    </router-link>
  </div>
</template>

在上面的示例中，我们将 `router-link` 组件用于卡片组件的外部，并且使用了动态路由来指定跳转的目标路由和参数。在这个例子中，我们假设你已经定义了一个名为 `CardDetail` 的路由，并且需要将卡片的 ID 作为参数传递过去。在路由定义中，你可以使用 `$route.params.id` 来获取这个参数。

当用户点击卡片时，Vue-Router 会自动导航到对应的路由，同时在 URL 中显示路由参数和查询参数。