UniApp 跨页面传参方法总结

发表于 分类于
本文字数： 1.8k 阅读时长 ≈ 2 分钟

一、通过 URL 传递

1. 传递基本类型

1
2
3
4
5
6
7
8
9
10
11
12
13
// 在起始页面 prev.vue 跳转到 next.vue 页面并传递参数
uni.navigateTo({
	url: 'pages/next?id=1&name=uniapp'
});

// 在 next.vue 页面接受参数
export default {
	onLoad: function (option) { // option 为 object 类型，会序列化上个页面传递的参数
		console.log(option.id); // 打印出上个页面传递的参数。
		console.log(option.name); // 打印出上个页面传递的参数。
	}
}

2. 传递复杂类型（对象、数组等）

可以将对象转成 json 字符串，再通过 encodeURIComponent 编码后进行传递。
注意：URL 有长度限制，如 IE 的最大 URL 长度是 2083 个字节（在 ASCII 码中，一个字母或字符占一字节，一个汉字占两字节。在 UTF-8 中，一个字母占一字节，一个汉字占三字节）

1
2
3
4
5
6
7
8
// prev.vue
<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>

// next.vue 接受参数
onLoad: function (option) {
	const item = JSON.parse(decodeURIComponent(option.item));
}

二、通过事件传递

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// prev.vue
uni.navigateTo({
  url: 'pages/next?id=1',
  success: function(res) {
    // 通过 eventChannel 向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromPrevPage', { data: 'data from prev page' })
  }
})

// next.vue
onLoad(option) {
  const eventChannel = this.getOpenerEventChannel();
  const isVisible = this.isVisible
  // 监听 acceptDataFromPrevPage 事件，获取 prev.vue 通过 eventChannel 传送到当前页面的数据
  eventChannel.on('acceptDataFromPrevPage', function(data) {
    console.log(data)
    // 这个回调函数不能通过 this 获取 vm 实例。如果想更改 next.vue 的数据，需要在函数外部引入间接修改
    isVisible.value = data
  })
},
data() {
  return {
    isVisible: {
      value: false
    }
  }
}

三、通过调用页面堆栈

当使用 navigateBack 返回到上一页面时，如果想要传递参数，可以通过 getCurrentPages() 调用页面堆栈获取上一页面栈的实例来更改状态。getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

1
2
3
4
5
6
7
goBack() {
  let pages = getCurrentPages(); // 获取所有页面栈实例列表
  let currentPage = pages[pages.length - 1]; // 当前页面实例
  let prevPage = pages[pages.length - 2]; // 上一页页面实例
  prevPage.$vm.formData.role = 'staff';
  uni.navigateBack();
},