本文共 1853 字，大约阅读时间需要 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/