微信小程序路由跳转封装

1.小程序根目录utils文件夹创建route.js文件

创建router.js文件对跳转页面路径统一管理，跳转时传入对应路径的key值即可

export default {
  'login':'/pages/login/login', // 登录页面
  'register':'/pages/register/register', // 注册页面
  'index':'/pages/index/index', // 主页
  'ForgotPassword':'/pages/ForgotPassword/ForgotPassword', //  忘记密码
  'menuPage':'/pages/menuPage/menuPage', //  菜单选择页面
}

2.同样在utils文件夹创建navigate.js文件，对微信页面跳转api进行封装

//  这里引入第一步创建的route.js文件
import route from './route'
// 封装路由方法
  /** 
   * function
   * @param {string} url 目标页面的路由
   * @param {Object} param 传递给目标页面的参数
   * @param {number} time 延时跳转，默认不延时
   * @description  处理目标页面的参数，转成json字符串传递给param字段，在目标页面通过JSON.parse(options.param)接收 保留当前页面，跳转到应用内的某个页面
   */  
  export function navigateTo(url,param={},time=0){
  //  对参数进行处理
    if(param!=={}){
      route[url]+=`?param=${JSON.stringify(param)}`
    }
    setTimeout(()=>{ //  延时跳转处理默认不延时
      wx.navigateTo({
        url:route[url], //  根据传递过来的key值从route.js文件去除对应路径
        fail(err) {
          console.log('navigateTo跳转出错',err)  
        },
      })
    },time)
  }


   /** 
   * function
   * @param {string} url 目标页面的路由
   * @param {Object} param 传递给目标页面的参数，只有页面栈无目标页面调用navigateTo时，参数才会生效，单单返回不能设置参数
   * @param {number} time 延时跳转，默认不延时
   * @description  先取出页面栈，页面栈最多十层，判断目标页面是否在页面栈中，如果在，则通过目标页的位置，返回到目标页面，否则调用navigateTo方法跳转到目标页
   */   
	export function  navigateBack(url,param={},time=0){
		let _url=route[url]
    const pagesList = getCurrentPages()
    let index =  pagesList.findIndex(e=>{
      return _url.indexOf(e.route)>=0
    })
    if(index == -1){  // 没有在页面栈中，可以调用navigateTo方法
      navigateTo(url,param,time)
    }else{
     setTimeout(()=>{
      wx.navigateBack({
        delta: pagesList.length-1-index,
        fail(err){
          console.log('navigateBack返回出错',err)
        }
      })
     },time)
    }
  }


	export function  switchTab(url){ // 封装switchTab，switchTab不能有参数 
    wx.switchTab({
      url:route[url]
    })
  }
	export function  redirectTo(url,param={},time=0){ // 封装redirectTo，和navigateTo没啥区别
    if(param){
      route[url]+=`?param=${JSON.stringify(param)}`
    }
    setTimeout(()=>{
      wx.redirectTo({
        url:route[url],
        fail(err) {
          console.log('redirectTo跳转出错',err)  
        },
      })
    },time)
  }
	export function  reLaunch(url,param={}){ // 关闭所有页面，打开到应用内的某个页面。
    if(param){
      route[url]+=`?param=${JSON.stringify(param)}`
    }
    wx.reLaunch({
      url:route[url],
      fail(err) {
        console.log('reLaunch跳转出错',err)  
      },
    })
  }

页面使用示例,以登录页面为例

//获取应用实例
const app = getApp();
import { navigateTo, redirectTo } from '../../utils/navigate'
Page({

	/**
	 * 页面的初始数据
	 */
	data: {
		statusBarHeight: app.globalData.statusBarHeight, //导航栏的高度
		versions: app.globalData.versions, //  版本号
		phone: '', //  手机号
		password: '', //  密码
		errorPhone: '', //  手机错误提示
		errorPssword: '', //  密码错误提示
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
	},
	//  登录请求
	async getLogin(params,type='default') {
		let res = await login(params)
		if (res.code !== 1000) {
		   //  处理登录失败逻辑
			return
		}
		message.toast('登录成功!', 'success')
		_setStorage('permissions', res.data)
		//  跳转主页 延时2秒
		redirectTo('index', {}, 2000)
	},
	//  进入注册页面
	register() {
	//  跳转到注册页面
		navigateTo('register')
	},
	//  进入忘记密码页面
	ForgotPassword() {
		navigateTo('ForgotPassword', { phone: phone })
	},
})

这里跳转进行延时操作是因为小程序中一跳转toast提示会没有显示的机会，比如登录界面我们往往需要登录成功之后给用户弹出一个成功提示再进行相应的跳转，如果不延时跳转的话，提示toast刚出现立马进行跳转操作会出现提示toast在页面闪现的状况。