UniApp跨页面传参的几种方式小结

// 页面 A 中跳转到页面 B，并传递参数
uni.navigateTo({
  url: '/pages/b/b?id=123&name=张三',
});
 
// 页面 B 中获取参数
console.log(this.$route.query.id); // 输出：123
console.log(this.$route.query.name); // 输出：张三

// 在 store 中定义 state、mutations 等
const store = new Vuex.Store({
  state: {
    userInfo: {},
  },
  mutations: {
    setUserInfo(state, payload) {
      state.userInfo = payload;
    },
  },
});
 
// 在页面 A 中存储数据到 Vuex 中
store.commit('setUserInfo', { id: 123, name: '张三' });
 
// 在页面 B 中获取 Vuex 中的数据
console.log(store.state.userInfo); // 输出：{ id: 123, name: '张三' }

// 在 main.js 中定义 EventBus
Vue.prototype.$eventBus = new Vue();
 
// 在页面 A 中触发事件，并传递参数
this.$eventBus.$emit('userInfoChanged', { id: 123, name: '张三' });
 
// 在页面 B 中监听事件，并获取参数
mounted() {
  this.$eventBus.$on('userInfoChanged', userInfo => {
    console.log(userInfo); // 输出：{ id: 123, name: '张三' }
  });
},

// 在页面 A 中存储数据到页面栈中
uni.navigateTo({
  url: '/pages/b/b',
  success() {
    const pages = getCurrentPages();
    const prevPage = pages[pages.length - 2];
    prevPage.userInfo = { id: 123, name: '张三' };
  },
});
 
// 在页面 B 中获取页面栈中的数据
const pages = getCurrentPages();
const prevPage = pages[pages.length - 2];
console.log(prevPage.userInfo); // 输出：{ id: 123, name: '张三' }