uni-app 兩種方式導航跳轉和傳參

聲明式跳轉

navigator

頁面跳轉。

該組件類似HTML中的<a>組件，但只能跳轉本地頁面。目標頁面必須在pages.json中注冊。

該組件的功能有API方式，另見：https://uniapp.dcloud.io/api/router?id=navigateto

屬性說明

屬性名	類型	默認值	說明	平台差異說明
url	String		應用內的跳轉鏈接，值為相對路徑或絕對路徑，如："../first/first"，"/pages/first/first"，注意不能加 .vue 后綴
open-type	String	navigate	跳轉方式
delta	Number		當 open-type 為 'navigateBack' 時有效，表示回退的層數
animation-type	String	pop-in/out	當 open-type 為 navigate、navigateBack 時有效，窗口的顯示/關閉動畫效果，詳見：窗口動畫	App
animation-duration	Number	300	當 open-type 為 navigate、navigateBack 時有效，窗口顯示/關閉動畫的持續時間。	App
hover-class	String	navigator-hover	指定點擊時的樣式類，當hover-class="none"時，沒有點擊態效果
hover-stop-propagation	Boolean	false	指定是否阻止本節點的祖先節點出現點擊態	微信小程序
hover-start-time	Number	50	按住后多久出現點擊態，單位毫秒
hover-stay-time	Number	600	手指松開后點擊態保留時間，單位毫秒
target	String	self	在哪個小程序目標上發生跳轉，默認當前小程序，值域self/miniProgram	微信2.0.7+、百度2.5.2+、QQ

open-type 有效值

值	說明	平台差異說明
navigate	對應 uni.navigateTo 的功能
redirect	對應 uni.redirectTo 的功能
switchTab	對應 uni.switchTab 的功能
reLaunch	對應 uni.reLaunch 的功能	字節跳動小程序不支持
navigateBack	對應 uni.navigateBack 的功能
exit	退出小程序，target="miniProgram"時生效	微信2.1.0+、百度2.5.2+、QQ1.4.7+

注意

• 跳轉tabbar頁面，必須設置open-type="switchTab"
• navigator-hover 默認為 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, <navigator> 的子節點背景色應為透明色。
• app-nvue 平台只有純nvue項目（render為native）才支持 <navigator>。非render為native的情況下，nvue暫不支持navigator組件，請使用API跳轉。
• app下退出應用，Android平台可以使用plus.runtime.quit。iOS沒有退出應用的概念。
• uLink組件是navigator組件的增強版，樣式上自帶下划線，功能上支持打開在線網頁、其他App的schema、mailto發郵件、tel打電話。

示例

<template>
	<view>
		<view>導航跳轉的學習</view>
		<!-- 普通跳轉，左上角有返回 -->
		<navigator url="/pages/detail/detail">跳轉至詳情頁</navigator>
		<!-- tabbar 頁面跳轉 -->
		<navigator url="/pages/message/message" open-type="switchTab">跳轉至信息頁</navigator>
		<!-- 重定向跳轉  關閉當前頁面再跳轉，不能返回 -->
		<navigator url="/pages/detail/detail" open-type="redirect">跳轉至詳情頁</navigator>

	</view>
</template>

<script>
</script>

<style>
</style>

編程式跳轉

uni.navigateTo(OBJECT)

保留當前頁面，跳轉到應用內的某個頁面，使用uni.navigateBack可以返回到原頁面。

OBJECT參數說明

參數	類型	必填	默認值	說明	平台差異說明
url	String	是		需要跳轉的應用內非 tabBar 的頁面的路徑 , 路徑后可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔；如 'path?key=value&key2=value2'，path為下一個頁面的路徑，下一個頁面的onLoad函數可得到傳遞的參數
animationType	String	否	pop-in	窗口顯示的動畫效果，詳見：窗口動畫	App
animationDuration	Number	否	300	窗口動畫持續時間，單位為 ms	App
events	Object	否		頁面間通信接口，用於監聽被打開頁面發送到當前頁面的數據。2.8.9+ 開始支持。
success	Function	否		接口調用成功的回調函數
fail	Function	否		接口調用失敗的回調函數
complete	Function	否		接口調用結束的回調函數（調用成功、失敗都會執行）

object.success 回調函數

參數

Object res

屬性	類型	說明
eventChannel	EventChannel	和被打開頁面進行通信

示例

//在起始頁面跳轉到test.vue頁面並傳遞參數
uni.navigateTo({
    url: 'test?id=1&name=uniapp'
});
// 在test.vue頁面接受參數
export default {
    onLoad: function (option) { //option為object類型，會序列化上個頁面傳遞的參數
        console.log(option.id); //打印出上個頁面傳遞的參數。
        console.log(option.name); //打印出上個頁面傳遞的參數。
    }
}
// 2.8.9+ 支持
uni.navigateTo({
  url: 'pages/test?id=1',
  events: {
    // 為指定事件添加一個監聽器，獲取被打開頁面傳送到當前頁面的數據
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通過eventChannel向被打開頁面傳送數據
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

// uni.navigateTo 目標頁面 pages/test.vue
onLoad: function(option) {
  console.log(option.query)
  const eventChannel = this.getOpenerEventChannel()
  eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
  eventChannel.emit('someEvent', {data: 'test'});
  // 監聽acceptDataFromOpenerPage事件，獲取上一頁面通過eventChannel傳送到當前頁面的數據
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    console.log(data)
  })
}

url有長度限制，太長的字符串會傳遞失敗，可改用窗體通信、全局變量，另外參數中出現空格等特殊字符時需要對參數進行編碼，如下為使用encodeURIComponent對參數進行編碼的示例。

<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
// 在test.vue頁面接受參數
onLoad: function (option) {
    const item = JSON.parse(decodeURIComponent(option.item));
}

注意：

• 頁面跳轉路徑有層級限制，不能無限制跳轉新頁面
• 跳轉到 tabBar 頁面只能使用 switchTab 跳轉
• 路由API的目標頁面必須是在pages.json里注冊的vue頁面。如果想打開web url，在App平台可以使用 plus.runtime.openURL或web-view組件；H5平台使用 window.open；小程序平台使用web-view組件（url需在小程序的聯網白名單中）。在hello uni-app中有個組件ulink.vue已對多端進行封裝，可參考。

uni.redirectTo(OBJECT)

關閉當前頁面，跳轉到應用內的某個頁面。

OBJECT參數說明

參數	類型	必填	說明
url	String	是	需要跳轉的應用內非 tabBar 的頁面的路徑，路徑后可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔；如 'path?key=value&key2=value2'
success	Function	否	接口調用成功的回調函數
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

示例

uni.redirectTo({
    url: 'test?id=1'
});

注意：

• 跳轉到 tabBar 頁面只能使用 switchTab 跳轉

uni.reLaunch(OBJECT)

關閉所有頁面，打開到應用內的某個頁面。

注意： 如果調用了 uni.preloadPage(OBJECT) 不會關閉，僅觸發生命周期 onHide

OBJECT參數說明

參數	類型	必填	說明
url	String	是	需要跳轉的應用內頁面路徑 , 路徑后可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔；如 'path?key=value&key2=value2'，如果跳轉的頁面路徑是 tabBar 頁面則不能帶參數
success	Function	否	接口調用成功的回調函數
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

示例

uni.reLaunch({
    url: 'test?id=1'
});
export default {
    onLoad: function (option) {
        console.log(option.id);
    }
}

Tips：

• H5端調用uni.reLaunch之后之前頁面棧會銷毀，但是無法清空瀏覽器之前的歷史記錄，此時navigateBack不能返回，如果存在歷史記錄的話點擊瀏覽器的返回按鈕或者調用history.back()仍然可以導航到瀏覽器的其他歷史記錄。

uni.switchTab(OBJECT)

跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面。

注意： 如果調用了 uni.preloadPage(OBJECT) 不會關閉，僅觸發生命周期 onHide

OBJECT參數說明

參數	類型	必填	說明
url	String	是	需要跳轉的 tabBar 頁面的路徑（需在 pages.json 的 tabBar 字段定義的頁面），路徑后不能帶參數
success	Function	否	接口調用成功的回調函數
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

示例

pages.json

{
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁"
    },{
      "pagePath": "pages/other/other",
      "text": "其他"
    }]
  }
}

other.vue

uni.switchTab({
    url: '/pages/index/index'
});

uni.navigateBack(OBJECT)

關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。

OBJECT參數說明

參數	類型	必填	默認值	說明	平台差異說明
delta	Number	否	1	返回的頁面數，如果 delta 大於現有頁面數，則返回到首頁。
animationType	String	否	pop-out	窗口關閉的動畫效果，詳見：窗口動畫	App
animationDuration	Number	否	300	窗口關閉動畫的持續時間，單位為 ms	App

示例

// 注意：調用 navigateTo 跳轉時，調用該方法的頁面會被加入堆棧，而 redirectTo 方法則不會。見下方示例代碼

// 此處是A頁面
uni.navigateTo({
    url: 'B?id=1'
});

// 此處是B頁面
uni.navigateTo({
    url: 'C?id=1'
});

// 在C頁面內 navigateBack，將返回A頁面
uni.navigateBack({
    delta: 2
});

示例

<template>
	<view>
		<view>導航跳轉的學習</view>
		<button @click="goDetail">跳轉之詳情頁</button>
		<button @click="goMessage">跳轉至信息頁</button>
		<button type="primary" @click="redirectDetail()">跳轉到詳情頁並關閉當前頁面</button>
	</view>
</template>

<script>
	export default {
		methods: {
			goDetail() {
				//普通跳轉，左上角有返回
				uni.navigateTo({
					url: '/pages/detail/detail?id=80&age=19'
				})
			},
			goMessage() {
				//tabbar 頁面跳轉
				uni.switchTab({
					url: '/pages/message/message'
				})
			},
			redirectDetail() {
				//重定向跳轉  關閉當前頁面再跳轉，不能返回
				uni.redirectTo({
					url: '/pages/detail/detail'
				});
			}
		}
	}
</script>

<style>
</style>

兩種方式的傳參

<template>
	<view>
		<view>導航跳轉的學習</view>
		<!-- 普通跳轉，左上角有返回 -->
		<navigator url="/pages/detail/detail?id=18&name='聲明式跳轉">跳轉至詳情頁</navigator>
		

		<button @click="goDetail">跳轉之詳情頁</button>
		
	</view>
</template>

<script>
	export default {
		methods: {
			goDetail() {
				//普通跳轉，左上角有返回
				uni.navigateTo({
					url: "/pages/detail/detail?id=20&name='編程式跳轉'"
				})
			}
		}
	}
</script>

<style>
</style>

頁面接收

<template>
	<view>這是詳情頁</view>
</template>

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

<style>
</style>