uniapp 页面间传递参数 除url外 有哪些方式并示例说明

在UniApp中，页面之间的数据传递除了通过URL查询参数之外，还可以使用以下几种方式：

1. **Vuex**（状态管理库）：适用于全局共享的状态管理。在Vuex store中存储数据，然后通过actions、mutations或者直接从store对象获取数据，父子组件之间可以监听状态变化。例如：

   // store.js
   export const state = () => ({
     userInfo: {}
   });
   
   export const mutations = {
     SET_USER_INFO(state, userInfo) {
       state.userInfo = userInfo;
     }
   };
   
   // 调用示例
   this.$store.commit('SET_USER_INFO', { userId: '123' });
   this.userInfo = this.$store.state.userInfo; // 父组件获取子组件设置的数据

2. **事件总线（Event Bus）**：用于在非直接父子组件间通信。创建一个bus实例，并发布/订阅事件。例如：

   import bus from '@/common/bus';

   bus.$emit('sendData', { param: 'value' }); // 发送数据
   bus.$on('getData', (data) => console.log(data)); // 监听接收数据

3. **自定义属性（$props/$emit）**：如果是在单文件组件间传递，可以直接使用Vue的prop和event系统。子组件向父组件传值：

   <parent-component :user-param="userInfo" @userChanged="updateUserInfo"></parent-component>

父组件处理子组件传递的参数：

   updateUserInfo({ param }) {
     this.userInfo = param;
   }

4. **Local Storage / Session Storage**：在浏览器本地存储数据，跨页面访问。但这种方式不太适合实时更新。

5. **Vue Router 的`meta`字段**：在router配置中添加meta，通过导航守卫`beforeRouteEnter`获取传递信息。

每种方式有其适用场景和性能考虑，选择合适的方式取决于项目的具体需求。