小程序封裝路由文件和路由方法，5種路由方法全解析

小程序5種路由方法使用場景，封裝路由文件和路由方法，提高小程序體驗和開發效率

明確要解決的問題

• 每次使用路由時，老是粘貼複製路徑，這樣在路徑有修改時，須要修改全部用到該路徑的地方，維護成本高
• 路由跳轉時拼接參數讓人頭大，業務複雜時要拼接十幾個參數
• 路由返回，只會返回一層，不能直接返回到目標頁面，由於不知道目標頁面是否在路由棧中，也不知道在第幾層

這些問題均可以經過封裝路由文件和路由方法解決，提供開發效率，減小BUG，省下來的時間能夠多陪陪女友

封裝路由文件，對路由進行統一管理

在根目錄建立router.js

// 這是路由管理頁面，在此統一配置路由
export default {
  'index':'/index/index', // 首頁
  'list':'/list/list', // list頁面
  'top':'/top/top', // top頁面
}
複製代碼

解決了第一個問題

封裝路由方法

路由方法有五個，經常使用的有三個switchTab、navigateTo、navigateBack

簡單介紹一下這五個方法及使用場景

• switchTab,跳轉tabBar頁面專用，其餘頁面出棧，新頁面入棧

• navigateTo最經常使用的路由跳轉，會加入到頁面棧，容許返回，也就是新頁面不斷入棧

• navigateBack返回，只能返回到頁面棧中存在的頁面，頁面不斷出棧，直到到達目標頁

• redirectTo關閉當前頁面，跳轉某個頁面，當前頁面不會加入到頁面棧，也就是說當前頁面不能經過返回到達，好比付款頁面，付款完成後，最好不要再讓用戶返回到付款頁，再好比一些沒法修改的操做，好比刪除商品，商品刪除後再經過navigateBack返回再刪除一次商品，體驗確定很差，表現爲當前頁面出棧，新頁面入棧

• reLaunch關閉全部頁面，打開某個頁面，能夠打開任意頁面包括tabBar，適合強制完成某個操做的頁面，好比登陸頁，當已登陸的用戶點擊退出後，進入登陸頁，那麼就不能經過返回再回去了，就必須留下來登陸或註冊，適合用這個，表現爲全部頁面出棧，新頁面入棧

開始封裝，在根目錄建立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吧