vue如何将从一个页面获取的数据在另外的页面显示

在 Vue 中，你可以通过路由传参的方式将数据从一个页面传递到另一个页面。具体来说，你可以使用 `$router.push` 方法在跳转到另一个页面时传递参数，然后在目标页面中使用 `$route.params` 来获取这些参数。下面是一个示例代码：

假设你有两个页面：`PageA` 和 `PageB`。在 `PageA` 中，你需要将某个数据传递给 `PageB`，可以使用以下代码：

<template>
  <div>
    <p v-for="person in people" :key="person.id" @click="showPerson(person)">{{ person.name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      people: [
        { id: 1, name: 'Alice', age: 25, location: 'New York' },
        { id: 2, name: 'Bob', age: 30, location: 'Los Angeles' },
        { id: 3, name: 'Charlie', age: 35, location: 'Chicago' }
      ]
    };
  },
  methods: {
    showPerson(person) {
      this.$router.push({ name: 'PageB', params: { person } });
    }
  }
};
</script>

在这个示例中，当用户点击某个人的名字时，`showPerson` 方法会将该人的对象作为参数传递给 `PageB` 页面，并跳转到 `PageB` 页面。在 `PageB` 中，你可以使用以下代码来获取该人的对象：

<template>
  <div>
    <p>Selected person: {{ person.name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      person: null
    };
  },
  mounted() {
    this.person = this.$route.params.person;
  }
};
</script>

在这个示例中，我们在 `mounted` 钩子中使用 `$route.params` 来获取传递过来的参数，并将其存储在 `person` 数据属性中，在模板中显示该人的名字。

值得注意的是，使用路由传参的方式只适用于传递少量的数据。如果需要传递大量的数据，建议使用 Vuex 或其他状态管理工具来管理数据。