溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小程序5種路由方法使用場景，封裝路由文件和路由方法，提升小程序體驗和開發效率
明確要解決的問題
這些問題都可以通過封裝路由文件和路由方法解決，提供開發效率，減少BUG，省下來的時間可以多陪陪女朋友
封裝路由文件，對路由進行統一管理
在根目錄創建router.js
// 這是路由管理頁面，在此統一配置路由
export default {
'index':'/index/index', // 首頁
'list':'/list/list', // list頁面
'top':'/top/top', // top頁面
}
解決了第一個問題
封裝路由方法
路由方法有五個，常用的有三個switchTab、navigateTo、navigateBack
簡單介紹一下這五個方法及使用場景
開始封裝，在根目錄創建utils.js
// 封裝路由方法
export default {
/**
* function
* @param {string} url 目標頁面的路由
* @param {Object} param 傳遞給目標頁面的參數
* @description 處理目標頁面的參數，轉成json字符串傳遞給param字段，在目標頁面通過JSON.parse(options.param)接收
*/
navigateTo(url,param={}){
if(param){
url+=`?param=${JSON.stringify(param)}`
}
wx.navigateTo({
url:url,
fail(err) {
console.log('navigateTo跳轉出錯',err)
},
})
},
/**
* function
* @param {string} url 目標頁面的路由
* @param {Object} param 傳遞給目標頁面的參數，只有頁面棧無目標頁面調用navigateTo時，參數才會生效，單單返回不能設置參數
* @description 先取出頁面棧，頁面棧最多十層，判斷目標頁面是否在頁面棧中，如果在，則通過目標頁的位置，返回到目標頁面，否則調用navigateTo方法跳轉到目標頁
*/
navigateBack(url,param={}){
const pagesList = getCurrentPages()
let index = pagesList.findIndex(e=>{
return url.indexOf(e.route)>=0
})
if(index == -1){ // 沒有在頁面棧中，可以調用navigateTo方法
this.navigateTo(url,param)
}else{
wx.navigateBack({
delta: pagesList.length-1-index,
fail(err){
console.log('navigateBack返回出錯',err)
}
})
}
},
switchTab(url){ // 封裝switchTab，switchTab不能有參數
wx.switchTab({
url:url
})
},
redirectTo(url,param={}){ // 封裝redirectTo，和navigateTo沒啥區別
if(param){
url+=`?param=${JSON.stringify(param)}`
}
wx.redirectTo({
url:url,
fail(err) {
console.log('redirectTo跳轉出錯',err)
},
})
},
reLaunch(url,param={}){ // 封裝reLaunch，和navigateTo沒啥區別
if(param){
url+=`?param=${JSON.stringify(param)}`要根據具體業務來，該返回就返回，該跳轉就用跳轉，不能一直跳轉！
}
wx.reLaunch({
url:url,
fail(err) {
console.log('reLaunch跳轉出錯',err)
},
})
}
}
以上對參數的封裝解決了第二個問題，對navigateBack的封裝解決了第三個問題
總結
小程序的路由跳轉有很多方法，但具體場景下合適的只有一個，選擇合適的路由跳轉方式會提高用戶體驗，封裝主要是提升開發效率，減少后期維護成本
小程序代碼片段地址 https://developers.weixin.qq.com/s/CsoJwDmR7B8N
github,如果幫到了你，就給一顆star吧
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
