uniapp - 路由跳转及路由传值

uni-app 有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转。
使用navigator 组件跳转官网：https://uniapp.dcloud.io/component/navigator
调用 API 跳转官网：https://uniapp.dcloud.io/api/router

一. 使用 navigator 组件跳转（无参数）

属性说明

属性名	类型	默认值	说明
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 时有效，窗口的显示/关闭动画效果。窗口动画
animation-duration	Number	300	当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间。
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

open-type 有效值

值	说明
navigate	对应 uni.navigateTo 的功能
redirect	对应 uni.redirectTo 的功能
switchTab	对应 uni.switchTab 的功能
reLaunch	对应 uni.reLaunch 的功能
navigateBack	对应 uni.navigateBack 的功能
exit	退出小程序，target="miniProgram"时生效

• 跳转 tabbar 页面，必须设置 open-type="switchTab"

应用示例

<template>
	<view>
		<!-- 跳转非 tabbar 页面，有返回按钮 -->
		<navigator url="../detail/detail">跳转详情页</navigator>
		<!-- 跳转至 tabbar 页面 -->
		<navigator url="../message/message" open-type="switchTab">跳转message</navigator>
		<!-- 跳转非 tabbar 页面，无返回按钮 -->
		<navigator url="../detail/detail" open-type="redirect">跳转detail</navigator>
	</view>
</template>

<script>
	export default {
		// 监听页面卸载
		onUnload() {
			console.log("页面卸载了")
		}
	}
</script>

<style>
</style>

二. 调用 API 编程式跳转跳转（无参数）

1. uni.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用 uni.navigateBack 可以返回到原页面。

OBJECT参数说明

参数	类型	必填	默认值	说明
url	String	是		需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数
animationType	String	否	pop-in	窗口显示的动画效果。窗口动画
animationDuration	Number	否	300	窗口动画持续时间，单位为 ms
events	Object	否		页面间通信接口，用于监听被打开页面发送到当前页面的数据。2.8.9+ 开始支持。
success	Function	否		接口调用成功的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

应用示例

<template>
	<view>
		<!-- 跳转非 tabbar 页面，有返回按钮 -->
		<button @click="toDetail">跳转至详情页</button>
	</view>
</template>

<script>
	export default {
		// 监听页面卸载
		onUnload() {
			console.log("页面卸载了")
		},
		methods: {
			toDetail() {
				// 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
				uni.navigateTo({
					url: '../detail/detail'
				})
			}
		}
	}
</script>

<style>
</style>

2. uni.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

OBJECT参数说明

参数	类型	必填	说明
url	String	是	需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面），路径后不能带参数
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

应用示例

<template>
	<view>
		<!-- 跳转至 tabbar 页面 -->
		<button @click="toMessage">跳转message</button>
	</view>
</template>

<script>
	export default {
		// 监听页面卸载
		onUnload() {
			console.log("页面卸载了")
		},
		methods: {
			toMessage() {
				// 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
				uni.switchTab({
					url: "../message/message"
				})
			}
		}
	}
</script>

<style>
</style>

3. uni.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

OBJECT参数说明

参数	类型	必填	说明
url	String	是	需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

应用示例

<template>
	<view>
		<!-- 跳转非 tabbar 页面，无返回按钮 -->
		<button @click="toDetailByRedirect">跳转etail</button>
	</view>
</template>

<script>
	export default {
		// 监听页面卸载
		onUnload() {
			console.log("页面卸载了")
		},
		methods: {
			toDetailByRedirect(){
				// 关闭当前页面，跳转到应用内的某个页面。
				uni.redirectTo({
					url:'../detail/detail'
				})
			}
		}
	}
</script>

<style>
</style>

三. 使用 navigator 组件跳转（传参数）

传值页面

以?分割，?后面为页面所传递的值，多个值之间以& 间隔

<template>
	<view>
		<navigator url="../detail/detail?id=10&name=test">跳转详情页</navigator>
	</view>
</template>

接收值页面

使用 onLoad 页面生命周期钩子接收传递过来的值

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

四. 调用 API 编程式跳转跳转（传参数）

传值页面

以?分割，?后面为页面所传递的值，多个值之间以& 间隔

export default {
		methods: {
			toDetail() {
				uni.navigateTo({
					url: '../detail/detail?id=10&name=test'
				})
			}
		}
	}
</script>

接收值页面

使用 onLoad 页面生命周期钩子接收传递过来的值

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