本文共 1810 字，大约阅读时间需要 6 分钟。

Vue Router 组件通信与路由传参详解

Vue Router 组件通信与路由传参

在前文中，我们学习了Vue Router的基础知识和使用方法。本文将深入探讨Vue Router在组件间通信和路由参数传递方面的实际应用。

Vue Router 组件通信

在Vue.js应用中，组件间的通信是一个核心问题。通过Vue Router，我们可以在路由切换时，轻松地在组件间传递参数。以下是实现组件间通信的常用方法：

1. 创建事件总线（Bus）

首先，我们需要创建一个事件总线，用于实现组件间的通信。在src/assets目录下，创建一个新的文件bus.js：

import Vue from 'vue'export default new Vue({  methods: {    emit: Vue.prototype.$emit  }})

或者更简单地：

let bus = new Vue()export default bus

2. 具体组件实现

在BrotherComponent.vue中：

在SisterComponent.vue中：

3. 路由注册

在src/router目录下，创建test.js：

import Vue from 'vue'import Router from 'vue-router'import Brother from '@/components/test04/BrotherComponent'import Sister from '@/components/test04/SisterComponent'Vue.use(Router)export default new Router({  routes: [    {      path: '/',      name: 'Brother',      component: Brother    },    {      path: '/sister',      name: 'Sister',      component: Sister    }  ]})

Vue Router 路由参数传递

在Vue Router中，路由参数的传递是实现组件间通信的重要手段。以下是两种常用方式：params和query。

1. params 参数传递

发送参数

在组件中使用$router.push方法：

methods: {  sendMsg() {    this.$router.push({      name: 'two',      params: {        code: this.code      }    })  }}

接收参数

在目标组件中使用$route.params：

2. query 查询参数

发送参数

在组件中使用$router.push方法：

methods: {  sendMsg() {    this.$router.push({      path: 'Four',      query: {        msg: this.msg      }    })  }}

接收参数

在目标组件中使用$route.query：

params 和 query 的区别

总结

通过上述方法，我们可以轻松实现组件间的通信和路由参数的传递。在实际开发中，可以根据具体需求选择合适的传递方式，灵活配置路由参数，提升应用的功能和用户体验。

转载地址：http://fsfyz.baihongyu.com/