微信小程序路由跳转实现详解

微信小程序提供了多种路由跳转方式，开发者可以根据不同场景选择合适的API。以下是微信小程序路由跳转的完整实现方法：

一、基本路由API

微信小程序提供了5个主要的路由跳转API：

1. wx.navigateTo - 保留当前页面，跳转到应用内某个页面

javascript 复制代码

wx.navigateTo({
  url: '/pages/detail/detail?id=123', // 路径+参数
  events: {
    // 监听被打开页面发到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    }
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

特点：

保留当前页面（页面栈+1）
可传递参数
可通过EventChannel进行页面间通信
小程序最多保留10个页面栈

2. wx.redirectTo - 关闭当前页面，跳转到应用内某个页面

javascript 复制代码

wx.redirectTo({
  url: '/pages/detail/detail?id=123'
})

特点：

关闭当前页面（页面栈不变）
不可返回上一页
适合登录页跳转等场景

3. wx.switchTab - 跳转到tabBar页面

javascript 复制代码

wx.switchTab({
  url: '/pages/index/index'
})

特点：

只能跳转tabBar配置的页面
关闭所有非tabBar页面
路径后不能带参数

4. wx.reLaunch - 关闭所有页面，打开应用内某个页面

javascript 复制代码

wx.reLaunch({
  url: '/pages/index/index'
})

特点：

清空页面栈
可以打开任意页面
适合应用重启场景

5. wx.navigateBack - 返回上一页面或多级页面

javascript 复制代码

// 返回上一页
wx.navigateBack()

// 返回指定页数
wx.navigateBack({
  delta: 2 // 返回上2页
})

二、路由跳转参数传递

1. URL传参（适合简单数据）

javascript 复制代码

wx.navigateTo({
  url: '/pages/detail/detail?id=123&name=test'
})

// 目标页面获取参数
Page({
  onLoad: function(options) {
    console.log(options.id) // 123
    console.log(options.name) // 'test'
  }
})

2. EventChannel通信（适合复杂数据）

javascript 复制代码

// 发起页面
wx.navigateTo({
  url: '/pages/detail/detail',
  events: {
    acceptData: function(data) {
      console.log(data)
    }
  },
  success: function(res) {
    res.eventChannel.emit('sendData', {data: 'test'})
  }
})

// 目标页面
Page({
  onLoad: function(options) {
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptData', {data: 'from detail'})
    eventChannel.on('sendData', function(data) {
      console.log(data)
    })
  }
})

三、路由跳转限制与注意事项

1.页面栈限制：

小程序最多保留10个页面栈
超过限制后navigateTo会失效

2.tabBar页面限制：

switchTab只能跳转tabBar页面
不能带参数

3.路由跳转拦截：

可以在app.js的onPageNotFound中处理404

javascript 复制代码

App({
  onPageNotFound(res) {
    wx.redirectTo({
      url: '/pages/404/404'
    })
  }
})

4.路由跳转前检查：

javascript 复制代码

if(getCurrentPages().length >= 10) {
  wx.redirectTo({
    url: '/pages/detail/detail'
  })
} else {
  wx.navigateTo({
    url: '/pages/detail/detail'
  })
}

四、路由跳转最佳实践

封装路由工具函数：

javascript 复制代码

const navigateTo = (url) => {
  if(getCurrentPages().length >= 9) {
    wx.redirectTo({ url })
  } else {
    wx.navigateTo({ url })
  }
}

module.exports = { navigateTo }

2.路由统一管理：

javascript 复制代码

const routes = {
  home: '/pages/index/index',
  detail: '/pages/detail/detail',
  login: '/pages/auth/login'
}

export default routes

3.路由拦截（登录检查等）：

javascript 复制代码

function navigateTo(url) {
  if(needAuth(url) && !isLogin()) {
    wx.redirectTo({
      url: '/pages/auth/login'
    })
    return
  }
  wx.navigateTo({ url })
}

4.路由动画增强：

可以在跳转前使用wx.showLoading

目标页面onReady后隐藏loading

五、常见问题解决方案

1.页面栈溢出问题：

监控页面栈深度，超过阈值使用redirectTo

2.页面间数据传递：

简单数据使用URL参数
复杂数据使用EventChannel或全局变量

3.页面返回刷新：

javascript 复制代码

// 前页设置标记
wx.navigateTo({
  url: '/pages/detail/detail',
  success() {
    getCurrentPages()[0].needRefresh = true
  }
})

// 前页onShow检查
Page({
  onShow() {
    if(this.needRefresh) {
      this.loadData()
      this.needRefresh = false
    }
  }
})

4.路由跳转性能优化：

减少不必要的页面跳转
预加载可能访问的页面数据

通过合理使用这些路由跳转方法和技巧，可以构建出流畅、用户体验良好的小程序页面导航系统。