Vue页面之间传递参数有多种方式，路由参数 (Route Params)，Vuex 状态管理，事件总线 (Event Bus)

在Vue中，页面之间传递参数有多种方式，每种方式都有其适用的场景。下面是一些常用的方法：

路由参数 (Route Params)

Vue中，页面之间传递参数有多种方式，每种方式都有其适用的场

当你想通过URL传递参数时，可以使用路由参数。例如，从一个列表页面跳转到详情页面，并传递ID作为参数。

在路由定义中：

javascript
复制
{
  path: '/detail/:id',
  name: 'Detail',
  component: Detail
}

在跳转时：

javascript
复制
this.$router.push({ name: 'Detail', params: { id: 123 } });

在接收页面：

javascript
复制
this.$route.params.id

查询参数 (Query Params)

查询参数是通过URL的查询字符串来传递的。它们不会改变路由的路径，只是附加在URL后面。

在跳转时：

javascript
复制
this.$router.push({ path: '/detail', query: { id: 123 } });

生成的URL可能是这样的：/detail?id=123

在接收页面：

javascript
复制
this.$route.query.id

Vuex 状态管理

如果你的应用使用了Vuex进行状态管理，那么可以在一个组件中改变状态，然后在另一个组件中通过计算属性或mapState辅助函数来获取这个状态。

例如，在组件A中：

javascript
复制
this.$store.commit('setDetailId', 123);

在组件B中：

javascript
复制
computed: {
  ...mapState(['detailId'])
}

事件总线 (Event Bus)

虽然Vuex是推荐的状态管理库，但有时你可能只是想在组件之间简单地传递一些事件。这时，你可以使用事件总线。

首先，创建一个事件总线实例：

javascript
复制
import Vue from 'vue';
export const EventBus = new Vue();

在组件A中触发事件：

javascript
复制
EventBus.$emit('detail-id-changed', 123);

在组件B中监听事件：

javascript
复制
created() {
  EventBus.$on('detail-id-changed', this.handleDetailIdChanged);
},
beforeDestroy() {
  EventBus.$off('detail-id-changed', this.handleDetailIdChanged);
},
methods: {
  handleDetailIdChanged(id) {
    // 处理ID
  }
}

props

如果两个组件之间有父子关系，你可以使用props来传递数据。父组件通过属性向子组件传递数据，子组件通过props来接收这些数据。

每种方法都有其适用的场景，你可以根据具体需求选择合适的方法。