小程序封装路由文件和路由方法，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吧