Uni-app页面路由的五种写法
·
文章目录
-
- uni.navigateTo(OBJECT)
- uni.redirectTo(OBJECT)
- uni.reLaunch(OBJECT)
- uni.switchTab(OBJECT)
- uni.navigateBack(OBJECT)
概要
代码展示在最后,可以在应用中感受这几种不同方法的不同
页面路由的方式有很多,在项目中遇到不同的跳转需求,就需要使用不同的跳转方法,下面介绍一下不同方法的使用方法吧
主体内容
一、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>
更多推荐
已为社区贡献5条内容
所有评论(0)