Vue3静态页面数据点击每一行数据跳转页面展示不同数据

如果您想在 Vue3 中实现点击静态页面数据中的每一行数据跳转到另一个页面并展示不同数据，可以使用 Vue Router 进行实现。

首先，您需要在项目中安装 Vue Router，然后配置路由。在组件中，您可以使用 router-link 组件为每一行数据添加链接，并通过 to 属性指定跳转的路由。同时，您可以使用路由的 params 传递数据到目标页面，在目标页面中使用 this.$route.params 获取该数据。

代码示例：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <router-link :to="{ name: 'item', params: { id: index } }">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'item1' },
        { name: 'item2' },
        { name: 'item3' },
      ],
    };
  },
};
</script>