uni-app常用的幾種頁面跳轉方式總結
一、uni.navigateTo(OBJECT)
保留當前頁面,跳轉到應用內的某個頁面,使用uni.navigateBack可以返回到原頁面
uni.navigateTo(OBJECT) | uni-app官網 (dcloud.io)
methods: {
//gonavigate()為點擊響應事件,可在HTML部分設置 @tap="gonavigate()"
gonavigate(){
uni.navigateTo({
//保留當前頁面,跳轉到應用內的某個頁面
url: '/pages/detail/detail'
})
}
}二、uni.navigateBack(OBJECT)
關閉當前頁面,返回上一頁面或多級頁面??赏ㄟ^ getCurrentPages() 獲取當前的頁面棧,決定需要返回幾層。
uni.navigateTo(OBJECT) | uni-app官網 (dcloud.io)
?methods: {
//goBack()為點擊響應事件,可在HTML部分設置 @tap="goBack()"
goBack(){
uni.navigateBack({
//關閉當前頁面,返回上一頁面或多級頁面。
delta:1
});
}
}三、uni.redirectTo(OBJECT)
關閉當前頁面,跳轉到應用內的某個頁面。
uni.navigateTo(OBJECT) | uni-app官網 (dcloud.io)
?methods: {
//goregirect()為點擊響應事件,可在HTML部分設置 @tap="goregirect()"
goregirect(){
uni.redirectTo({
//關閉當前頁面,跳轉到應用內的某個頁面。
url:'/pages/about/about'
});
}
}四、uni.switchTab(BOJECT)
跳轉到 tabBar 頁面,并關閉其他所有非 tabBar 頁面。
uni.navigateTo(OBJECT) | uni-app官網 (dcloud.io)
methods: {
checklogin(){
uni.request({
url: 'http://localhost:8081/api/user/login',
data: {
email: this.emailone,
password: this.password,
},
success: (res) => {
//登錄成功
if (res.data.success == true) {
uni.showToast({
title: '登錄成功', //顯示的文字
icon: 'success' //顯示的圖標
});
//跳轉到 tabBar 頁面,并關閉其他所有非 tabBar 頁面。
uni.switchTab({
url: '../tabbor/index/index'
});
} else {
uni.showToast({
title: '用戶名或密碼錯誤', //顯示的文字
icon: 'none' //顯示的圖標
});
}
}
})
}
}五、openURL
調用第三方程序打開指定的URL
HTML5+ API Reference (html5plus.org)
?methods: {
//goopenurl()為點擊響應事件,可在HTML部分設置 @tap="goopenurl()"
goopenurl(){
boid plus.runtime.openURL('https://www.baidu.com/')
}
}補充:傳值與接收
通過跳轉傳值一般套路就是在URL中把需要傳的值帶過去,然后再接收的頁面onLoad函數中,利用參數接回來。
跳轉頁面:
uni.navigateTo({
url:'頁面路徑?id=1'
})
接收頁面:
onLoad: function (option) { //option為object類型,會序列化上個頁面?zhèn)鬟f的參數
console.log(option.id);
//打印出上個頁面?zhèn)鬟f的參數。傳遞的是id=1,則獲取到的就是option.id
}
總結
到此這篇關于uni-app常用的幾種頁面跳轉方式的文章就介紹到這了,更多相關uni-app頁面跳轉方式內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
原生javascript的ajax請求及后臺PHP響應操作示例
這篇文章主要介紹了原生javascript的ajax請求及后臺PHP響應操作,結合示例形式分析了JavaScript前臺ajax請求的原理、調用、后臺PHP響應請求及cookie保存相關操作技巧,需要的朋友可以參考下2020-02-02
微信小程序使用map組件實現獲取定位城市天氣或者指定城市天氣數據功能
這篇文章主要介紹了微信小程序使用map組件實現獲取定位城市天氣或者指定城市天氣數據功能,涉及微信小程序map組件結合微信API獲取天氣信息相關操作技巧,需要的朋友可以參考下2019-01-01

