前言

• 好，經過上個章節的介紹完畢之后，了解了一下 uni-app-路由
• 那么了解完了uni-app-路由之后，這篇文章來給大家介紹一下 uni-app-路由傳遞數據

路由傳參怎么傳，是不是可以從 A 頁面傳遞給 B 頁面，然后 B 頁面再傳遞給 C 頁面, 也可以從 C 頁面傳遞給 B 頁面，然后 B 頁面再傳遞給 A 頁面（可以順著傳也可以逆著傳遞）。

注意點：我這里沒有使用新建項目，而是使用的是上一篇文章的項目，所以大家可以直接在上一篇文章的項目上進行修改。

步入正題

通過組件跳轉傳遞數據(包含API)

• 傳遞

更改 navigate 跳轉的路由在后面加上 ? 號，然后在后面加上參數，參數的格式是 key=value，多個參數之間用 & 連接。

<navigator url="/pages/one/one?name=BNTang&age=18" open-type="navigate">
    <button type="default">navigate</button>
</navigator>

這樣改寫了之后，我們在跳轉到 one 頁面的時候，就會把 name 和 age 兩個參數傳遞過去。

• 接收

在 one 頁面中，可以在 onLoad 生命周期中進行接收，他會在 onLoad 生命周期中接收到一個參數 options，這個 options 就是我們傳遞過來的參數，我們可以通過 options.name 和 options.age 來獲取到我們傳遞過來的參數。

<script>
	export default {
		onLoad(option) {
			console.log(option)
		}
	}
</script>

如上的通過組件的方式，我們快速的來過一邊通過 API 的方式來傳遞數據, 代碼如下：

<template>
	<view>
        省略...
      
		<button @click="onJumpOne">navigateTo</button>
	</view>
</template>
<script>
	export default {
		methods: {
			onJumpOne() {
				uni.navigateTo({
					url: '/pages/one/one?name=LeaderTang&age=18'
				})
			}
		}
	}
</script>

這種方式傳遞數據是最簡單的，除了這種方式，還有其他的方式來傳遞數據，下面我們來看一下其他的方式。

通過事件通道傳遞數據(API路由跳轉)

打開 UniApp 官方文檔：https://uniapp.dcloud.net.cn/api/router.html#navigateto

在 navigateTo 中，有介紹到一個 success 回調函數，這個回調函數是在跳轉成功之后執行的，我們可以在這個回調函數中進行傳遞數據。

<template>
	<view>
      省略...

      <button @click="onJumpOne">navigateTo</button>
	</view>
</template>
<script>
	export default {
		methods: {
			onJumpOne() {
				uni.navigateTo({
					url: '/pages/one/one',
					success: function(res) {
						// 通過eventChannel向被打開頁面傳送數據
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							data: '通過事件通道傳遞的數據'
						})
					}
				})
			}
		}
	}
</script>

如上代碼在 success 回調函數中，我們通過 res.eventChannel.emit 方法來傳遞數據，這個方法接收兩個參數，第一個參數是一個字符串，這個字符串是我們在接收數據的頁面中定義的(兩邊要一致，自己定義)，第二個參數是一個對象，這個對象就是我們要傳遞的數據。

然后我們在 one 頁面中接收數據，代碼如下：

<template>
	<view>
		<text>one</text>
	</view>
</template>
<script>
	export default {
		onLoad(option) {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('acceptDataFromOpenerPage', function(data) {
				console.log(data)
			})
		}
	}
</script>

如上代碼，我們在 onLoad 生命周期中通過 this.getOpenerEventChannel() 方法來獲取到事件通道，然后通過 eventChannel.on 方法來接收數據，這個方法接收兩個參數，第一個參數是我們在跳轉頁面中定義的字符串，第二個參數是一個回調函數，這個回調函數中的參數就是我們傳遞過來的數據。

看了這么多都是從上一個頁面傳遞到下一個頁面，那么我們怎么從下一個頁面傳遞到上一個頁面呢？這正是我接下來要介紹的內容。

返回上一個頁面傳遞數據

打開 UniApp 官方文檔：https://uniapp.dcloud.net.cn/api/router.html#navigateback

返回上一個頁面，我們可以通過 navigateBack 方法來實現，這個方法接收一個參數 delta，這個參數是一個數字，表示返回的頁面數，如果 delta 是 1，表示返回上一個頁面，如果 delta 是 2，表示返回上兩個頁面，以此類推（堆棧結構）。

我們先來搭建頁面，放一個按鈕，點擊按鈕返回上一個頁面。

<template>
	<view>
		<text>one</text>
		<text>=======================</text>
		<button type="default" @click="onGoBackClick">返回上一個界面</button>
	</view>
</template>
<script>
	export default {
		methods: {
			onGoBackClick() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

如上代碼，我們在點擊按鈕的時候，調用 navigateBack 方法，傳遞一個 delta 參數，這個參數是 1，表示返回上一個頁面。

那么怎么在返回上一個頁面的時候，傳遞數據呢？我們可以在 onGoBackClick 方法中獲取事件通道，然后通過 eventChannel.emit 方法來傳遞數據，代碼如下：

const eventChannel = this.getOpenerEventChannel();
eventChannel.emit("acceptDataFromOpenerPage", {
    data: '通過事件通道返回時傳遞數據'
})

如上代碼，我們在點擊按鈕的時候，獲取事件通道，然后通過 emit 方法來傳遞數據，這個方法接收兩個參數，第一個參數是一個字符串，這個字符串是我們在接收數據的頁面中定義的(兩邊要一致，自己定義)，第二個參數是一個對象，這個對象就是我們要傳遞的數據。

返回時我們傳遞了數據，那么我們怎么接收數據呢？我們可以在上一個頁面中的跳轉 API 對象中通過 events 參數, 在 events 定義一個回調函數，這個回調函數的名字必須與返回頁面中 emit 方法中的第一個參數一致，然后在這個回調函數中接收數據，代碼如下：

events: {
    acceptDataFromOpenerPage(data) {
        console.log(data)
    }
}

• 測試結果

這種通過事件通道的方式比較通用，不管是從上一個頁面傳遞到下一個頁面，還是從下一個頁面傳遞到上一個頁面，都可以通過這種方式來傳遞數據。

最后

大家好我是 BNTang, 一個熱愛分享的技術的開發者，如果大家覺得我的文章對你有幫助的話，可以關注我的公眾號 JavaBoyL，我會在公眾號中分享一些IT技術和一些個人的見解，謝謝大家的支持。

總結

以上是生活随笔為你收集整理的【UniApp】-uni-app-传递数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。