Vue中不同页面之间如何传递参数？

1 问题描述

当一个页面中的某个变量的值发生变化时，另一个页面的相应数据需要及时更新，此时就需要在页面之间传递参数。然而不同的两个页面属于同级关系，不能通过父子组件传参的方式解决这个问题。

2 解决思路

1. 全局事件总线 EventBus
2. vuex + 监听器 (watch)

3 解决方法

1. 【方法一】：配置全局事件总线（MITT）

   1. 全局安装 mitt 依赖包

      npm i mitt -S
      

   2. 在 main.ts 中创建 mitt 实例并挂载到 app.config.globalProperties 上

      import App from './App.vue'
      import mitt from 'mitt'
      
      // 创建mitt实例
      const EventBus = mitt()
      /**
       * 代码提示[……不存在属性"EventBus"……]是因为在app.config.globalProperties上挂载的EventBus
       * 要进行ComponentCustomProperties接口扩展才能获得类型识别
       * ComponentCustomProperties接口是vue3提供的增强组件实例类型以支持自定义全局属性，通过TypeScript模块扩展来扩展的
       */
      declare module 'vue' {
        export interface ComponentCustomProperties {
          EventBus: typeof EventBus
        }
      }
      
      const app = createApp(App)
      // 全局挂载全局事件总线mitt
      app.config.globalProperties.EventBus = EventBus
      
      app.use(router).mount('#app')
      

   3. 在一个页面中广播事件

      <template>
          <div>
        		<button @click="handleItemChange">修改</button>
          </div>
      <template>
      <script lang="ts">
      import { defineComponent, getCurrentInstance } from 'vue'
      export default defineComponent({
          setup() {
          	const instance = getCurrentInstance()
              const handleItemChange = () => {
                  instance?.proxy?.EventBus.emit('itemChanged', { param: 'Sth. changed' })
              }
      	}
      })
      <script>
      

   4. 在另一个页面中监听事件

      <template>
          <div></div>
      <template>
      <script lang="ts">
      import { defineComponent, getCurrentInstance } from 'vue'
      export default defineComponent({
          setup() {
          	const instance = getCurrentInstance()
              
              instance?.proxy?.EventBus.on('itemChanged', (param: any) => {
             		console.log('收到信息' + param)
              })
          }
      })
      <script>
      

2. 【方法二】：将 CarCode 存入 vuex 中，然后利用 watch() 监听其变化