概要

代码展示在最后，可以在应用中感受这几种不同方法的不同

页面路由的方式有很多，在项目中遇到不同的跳转需求，就需要使用不同的跳转方法，下面介绍一下不同方法的使用方法吧

主体内容

一、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	否		接口调用结束的回调函数（调用成功、失败都会执行）

参考文献：uniapp-页面路由 

二、uni.redirectTo(OBJECT)

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

OBJECT参数说明

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

参考文献：uniapp-页面路由  

三、uni.reLaunch(OBJECT)

释：关闭所有页面，打开到应用内的某个页面。

OBJECT参数说明

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

参考文献：uniapp-页面路由  

四、uni.switchTab(OBJECT)

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

OBJECT参数说明

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

参考文献：uniapp-页面路由  

五、uni.navigateBack(OBJECT)

释：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

OBJECT参数说明

参数	类型	必填	默认值	说明	平台差异说明
delta	Number	否	1	返回的页面数，如果 delta 大于现有页面数，则返回到首页。
animationType	String	否	pop-out	窗口关闭的动画效果，详见：窗口动画	App
animationDuration	Number	否	300	窗口关闭动画的持续时间，单位为 ms	App
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

参考文献：uniapp-页面路由  

注意事项

在进行跳转时，有时候需要携带参数，可以到  uniapp跳转带值或对象的方法  查看详细步骤

完整代码展示

在代码中的跳转方法的Url需要填写自己本地的Url，在可以正常运行

一、

<template>
	<view>
		<form @submit="onsubmit">
			<input  type="text" name="username" placeholder="请输入姓名">
			<input type="number" name="age" placeholder="请输入年龄">
			<button form-type="submit" type="primary">navigateTo提交</button>
			<button form-type="reset" size="mini">清空</button>
		</form>
	<br>
	<hr>
	<button @click="redirectTo" type="warn">redirectTo跳转</button>
	<button @click="reLaunch" type="warn">uni.reLaunch跳转</button>
	<button @click="shujia" type="warn">uni.switchTab跳转</button>
	
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				age:0
			}
		},
		methods: {
			onsubmit(option){
				this.name = option.detail.value.username
				this.age = option.detail.value.age
				uni.navigateTo({
					url:"../page2/page2?name="+this.name
					+"&age="+this.age
				})
			},
			redirectTo(){
				uni.redirectTo({
					//关闭当前页面，跳转到应用内的某个页面。
					url:"../page2/page2"
				})
			},
			reLaunch(){
				uni.reLaunch({
					url:"../page2/page2"
				})
			},
			shujia(){
				uni.switchTab({
						url:"../../index/shujia"
				})
			}
		},
		onUnload() {
			console.log("页面一关闭")
		}
		
	}
</script>

<style>
input{
	margin-left: 10px;
	border: 1px solid black;
	padding-left: 10rpx;
	width: 80%;
	margin-top: 50rpx;
	margin-bottom: 50rpx;
	border-radius: 20px;
}
</style>

二 、

<template>
	<view class="box">
			<button @click="fanhui"> navigateBack返回</button>
	<button @click="shujia" type="warn">uni.switchTab跳转</button>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				name:"",
				age:0
			}
		},
		onLoad(option) {
			this.name = option.name
			this.age = option.age
			console.log("姓名："+this.name+"，年龄："+this.age)
		},
		onHide() {
			
		},
		methods: {
			fanhui(){
				uni.navigateTo({
					url:"../page1/page1"
				})
			},
			shujia(){
				uni.switchTab({
					url:"../../index/shujia"
				})
			}
			
		}
	}
</script>

<style>

</style>