uniapp、微信小程序 router路由封装

小程序开发的时候， 我们会有不同的跳转方式，如果我们使用微信官方提供的API, 虽然也能达到我们想要的预期，但是再开发中 我们会发现有时候很不方便，而且维护的时候也不方便，这时候我们就会想方法给所有的路由跳转方法封装再一起，在需要使用的地方直接调用，这样我们就会方便很多，维护也很方便。

微信提供的路由API：

wx.redirectTo： tabbar 页面的跳转  不能带参数

wx.reLaunch：关闭所有页面，打开到应用内的某个页面，可以带参数。

wx.redirectTo： 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar页面，可以带参数。

wx.navigateTo：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面，可以带参数。

wx.navigateBack：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

详情可以去查看微信开发者文档

首先在我们封装之前要清楚各种路由跳转的路径属于那种路由跳转，我们就需要封装一个路径转换的方法：创建一个js文件utils.js

export function getJumpUrl(obj) {
  let url = ''
  let arr = []
  let redirect = ''
  if (typeof obj == 'string') {
    url = obj
  }
  if (typeof obj == 'object') {
    for (const key in obj.query) {
      if (obj.query.hasOwnProperty(key)) {
        const element = obj.query[key];
        arr.push(`${key}=${element}`)
        if (key == 'redirect') {
          redirect = obj.query[key]
        }
      }
    }
    if (arr.join('&')) {
      url = `${obj.path}?${arr.join('&')}`
    } else {
      url = `${obj.path}`
    }
  }
  return {
    url: url,
    redirect: redirect
  }
}

当我们对传的参数封装处理好后，就要去分装我们路由了，创建router.js， 直接上代码：

import { getJumpUrl } from "./utils"

let router = {
  push(obj){
    let result = getJumpUrl(obj)
    if(!wx.getStorageSync('access_token')){
      wx.redirectTo({
        url: `/pages/login/login?path=${encodeURIComponent(result['redirect']||result['url'])}`
      })
      return
    }
    wx.navigateTo({
      url: result['url'],
    })
  },
  replace(obj) {
    let result = getJumpUrl(obj)
    if(!wx.getStorageSync('access_token')){
      wx.redirectTo({
        url: `/pages/login/login?path=${encodeURIComponent(result['redirect']||result['url'])}`
      })
      return
    }
    wx.redirectTo({
      url: result['url']
    })
  },
  reLaunch(obj) {
    let result = getJumpUrl(obj)
    if(!wx.getStorageSync('access_token')){
      wx.redirectTo({
        url: `/pages/login/login?path=${encodeURIComponent(result['redirect']||result['url'])}`
      })
      return
    }
    wx.reLaunch({
      url: result['url']
    })
  },
  switchTab(obj) {
    let result = getJumpUrl(obj)
    if(!wx.getStorageSync('access_token')){
      wx.redirectTo({
        url: `/pages/login/login?path=${encodeURIComponent(result['redirect']||result['url'])}`
      })
      return
    }
    wx.switchTab({
      url: result['url']
    })
  },
  back(delta = 1){
    wx.navigateBack({
      delta: delta
    })
  }
}
export default router

当我们在页面中调用：引入我们路由文件  router.js， 例如  import router from '../../utils/router'

文件路径根据自己的来修改，

import router from '../../utils/router'

// 在方法中调用router中的方法  如：

router.push({
   path: "/pages/my_order/my_order", //  跳转的页面
   query: {
     type: item.type   // 参数
   }
});

其他类似的调用方式，就不在这里写了，如果有小伙伴想一起探讨前端相关知识，可以关注我公众号程序员夫子 " codefuzi",  一起学习