小程序5種路由方法使用場(chǎng)景，封裝路由文件和路由方法，提升小程序體驗(yàn)和開發(fā)效率

鞍山ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

明確要解決的問題

• 每次使用路由時(shí)，總是粘貼復(fù)制路徑，這樣在路徑有修改時(shí)，需要修改所有用到該路徑的地方，維護(hù)成本高
• 路由跳轉(zhuǎn)時(shí)拼接參數(shù)讓人頭大，業(yè)務(wù)復(fù)雜時(shí)要拼接十幾個(gè)參數(shù)
• 路由返回，只會(huì)返回一層，不能直接返回到目標(biāo)頁面，因?yàn)椴恢滥繕?biāo)頁面是否在路由棧中，也不知道在第幾層

這些問題都可以通過封裝路由文件和路由方法解決，提供開發(fā)效率，減少BUG，省下來的時(shí)間可以多陪陪女朋友

封裝路由文件，對(duì)路由進(jìn)行統(tǒng)一管理

在根目錄創(chuàng)建router.js

// 這是路由管理頁面，在此統(tǒng)一配置路由
export default {
 'index':'/index/index', // 首頁
 'list':'/list/list', // list頁面
 'top':'/top/top', // top頁面
}

解決了第一個(gè)問題

封裝路由方法

路由方法有五個(gè)，常用的有三個(gè)switchTab、navigateTo、navigateBack
簡(jiǎn)單介紹一下這五個(gè)方法及使用場(chǎng)景

• switchTab,跳轉(zhuǎn)tabBar頁面專用，其他頁面出棧，新頁面入棧
• navigateTo最常用的路由跳轉(zhuǎn)，會(huì)加入到頁面棧，允許返回，也就是新頁面不斷入棧
• navigateBack返回，只能返回到頁面棧中存在的頁面，頁面不斷出棧，直到到達(dá)目標(biāo)頁
• redirectTo關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)某個(gè)頁面，當(dāng)前頁面不會(huì)加入到頁面棧，也就是說當(dāng)前頁面不能通過返回到達(dá)，比如付款頁面，付款完成后，最好不要再讓用戶返回到付款頁，再比如一些無法修改的操作，比如刪除商品，商品刪除后再通過navigateBack返回再刪除一次商品，體驗(yàn)肯定不好，表現(xiàn)為當(dāng)前頁面出棧，新頁面入棧
• reLaunch關(guān)閉所有頁面，打開某個(gè)頁面，可以打開任意頁面包括tabBar，適合強(qiáng)制完成某個(gè)操作的頁面，比如登錄頁，當(dāng)已登錄的用戶點(diǎn)擊退出后，進(jìn)入登錄頁，那么就不能通過返回再回去了，就必須留下來登錄或注冊(cè)，適合用這個(gè)，表現(xiàn)為所有頁面出棧，新頁面入棧

開始封裝，在根目錄創(chuàng)建utils.js

// 封裝路由方法
export default {

 /** 
  * function
  * @param {string} url 目標(biāo)頁面的路由
  * @param {Object} param 傳遞給目標(biāo)頁面的參數(shù)
  * @description 處理目標(biāo)頁面的參數(shù)，轉(zhuǎn)成json字符串傳遞給param字段，在目標(biāo)頁面通過JSON.parse(options.param)接收
  */ 
 navigateTo(url,param={}){
  if(param){
   url+=`?param=${JSON.stringify(param)}`
  }
  wx.navigateTo({
   url:url,
   fail(err) {
    console.log('navigateTo跳轉(zhuǎn)出錯(cuò)',err) 
   },
  })
 },


  /** 
  * function
  * @param {string} url 目標(biāo)頁面的路由
  * @param {Object} param 傳遞給目標(biāo)頁面的參數(shù)，只有頁面棧無目標(biāo)頁面調(diào)用navigateTo時(shí)，參數(shù)才會(huì)生效，單單返回不能設(shè)置參數(shù)
  * @description 先取出頁面棧，頁面棧最多十層，判斷目標(biāo)頁面是否在頁面棧中，如果在，則通過目標(biāo)頁的位置，返回到目標(biāo)頁面，否則調(diào)用navigateTo方法跳轉(zhuǎn)到目標(biāo)頁
  */  
 navigateBack(url,param={}){
  const pagesList = getCurrentPages()
  let index = pagesList.findIndex(e=>{
   return url.indexOf(e.route)>=0
  })
  if(index == -1){ // 沒有在頁面棧中，可以調(diào)用navigateTo方法
   this.navigateTo(url,param)
  }else{
   wx.navigateBack({
    delta: pagesList.length-1-index,
    fail(err){
     console.log('navigateBack返回出錯(cuò)',err)
    }
   })
  }
 },


 switchTab(url){ // 封裝switchTab，switchTab不能有參數(shù)
  wx.switchTab({
   url:url
  })
 },
 redirectTo(url,param={}){ // 封裝redirectTo，和navigateTo沒啥區(qū)別
  if(param){
   url+=`?param=${JSON.stringify(param)}`
  }
  wx.redirectTo({
   url:url,
   fail(err) {
    console.log('redirectTo跳轉(zhuǎn)出錯(cuò)',err) 
   },
  })
 },
 reLaunch(url,param={}){ // 封裝reLaunch，和navigateTo沒啥區(qū)別
  if(param){
   url+=`?param=${JSON.stringify(param)}`要根據(jù)具體業(yè)務(wù)來，該返回就返回，該跳轉(zhuǎn)就用跳轉(zhuǎn)，不能一直跳轉(zhuǎn)！
  }
  wx.reLaunch({
   url:url,
   fail(err) {
    console.log('reLaunch跳轉(zhuǎn)出錯(cuò)',err) 
   },
  })
 }
}

以上對(duì)參數(shù)的封裝解決了第二個(gè)問題，對(duì)navigateBack的封裝解決了第三個(gè)問題

總結(jié)

小程序的路由跳轉(zhuǎn)有很多方法，但具體場(chǎng)景下合適的只有一個(gè)，選擇合適的路由跳轉(zhuǎn)方式會(huì)提高用戶體驗(yàn)，封裝主要是提升開發(fā)效率，減少后期維護(hù)成本

小程序代碼片段地址 https://developers.weixin.qq.com/s/CsoJwDmR7B8N

github,如果幫到了你，就給一顆star吧

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享題目：小程序封裝路由文件和路由方法(5種全解析)
轉(zhuǎn)載注明：http://jinyejixie.com/article8/pggoop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、域名注冊(cè)、云服務(wù)器、虛擬主機(jī)、用戶體驗(yàn)、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)