vue不同页面间如何传递数据

在Vue中，可以使用多种方式在不同页面（组件）之间传递数据。以下是几种常用的方法：

1. 使用路由参数（Route Parameters）：通过路由参数可以在不同页面之间传递数据。在路由配置中定义带有参数的路由，并通过$route.params访问参数值。

在源页面中：

<template>
  <div>
    <router-link :to="{ name: 'target', params: { id: 123 } }">跳转到目标页面</router-link>
  </div>
</template>

在目标页面中：

<template>
  <div>
    <p>目标页面</p>
    <p>ID: {{ $route.params.id }}</p>
  </div>
</template>

2. 使用查询参数（Query Parameters）：通过查询参数也可以在不同页面之间传递数据。在路由配置中定义带有查询参数的路由，并通过$route.query访问参数值。

在源页面中：

<template>
  <div>
    <router-link :to="{ name: 'target', query: { name: 'John' } }">跳转到目标页面</router-link>
  </div>
</template>

在目标页面中：

<template>
  <div>
    <p>目标页面</p>
    <p>Name: {{ $route.query.name }}</p>
  </div>
</template>

3. 使用状态管理（State Management）：使用Vue的状态管理库（如Vuex）可以在不同页面之间共享和传递数据。在一个页面中修改状态，在另一个页面中获取和使用该状态。
4. 使用事件总线（Event Bus）：创建一个全局的Vue实例作为事件总线，通过事件发布和订阅机制在不同页面之间传递数据。

在main.js或其他合适的位置：

import Vue from 'vue';

// 创建事件总线实例
export const eventBus = new Vue();

在源页面中：

<template>
  <div>
    <button @click="sendData">发送数据</button>
  </div>
</template>

<script>
import { eventBus } from './main';

export default {
  methods: {
    sendData() {
      eventBus.$emit('data', { message: 'Hello' });
    }
  }
};
</script>

在目标页面中：

<template>
  <div>
    <p>接收到的数据: {{ receivedData }}</p>
  </div>
</template>

<script>
import { eventBus } from './main';

export default {
  data() {
    return {
      receivedData: ''
    };
  },
  created() {
    eventBus.$on('data', data => {
      this.receivedData = data.message;
    });
  }
};
</script>

以上是几种常用的在Vue中在不同页面（组件）之间传递数据的方法。选择合适的方法取决于具体的需求和场景。