提高小程序开发效率：全面解析加密路由文件和5种路由方式

5种路由方式和小程序的使用场景，加密路由文件和路由方式，提高小程序体验和开发效率

帮助解决问题

• 每次使用路由时，总是粘贴并复制路由。这样当路径改变时，就必须把所有使用该路径的地方都改变，导致维护成本很高。
• 路由跳转时的拼接参数混乱，业务复杂。如果需要连接十几个参数
• 路由返回，只返回一层，并不能直接返回目标页面，因为不知道目标页面是否在路由栈中，而你也不知道它是哪一层

这些问题都可以通过封装路由文件和路由方法来解决，提高了开发效率，减少了BUG，节省了更多的时间陪伴女朋友

封装路由文件，统一管理路由

根目录下创建router.js

// 这是路由管理页面，在此统一配置路由
export default {
  'index':'/index/index', // 首页
  'list':'/list/list', // list页面
  'top':'/top/top', // top页面
}
复制代码

解决第一个问题

封装路由方法

常用的就是这三个，还有三个switchTab 、 navigatorTo、n avigateBack

，Spring 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)  
      },
    })
  }
}
复制代码

上面的参数封装的方案。具体的。选择合适的路由跳转方式会提高用户体验，而封装主要是为了提高开发效率，降低后期维护成本

作者：前端李辉旺
链接：https://juejin.im/post /5ce920cf6fb9a07f091b7eae
来源：Dig Kim
版权归作者所有。如需商业转载，请联系求作者授权。非商业转载请来源。