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

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

一、基本路由API

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

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

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 - 关闭当前页面，跳转到应用内某个页面

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

特点：

• 关闭当前页面（页面栈不变）

• 不可返回上一页

• 适合登录页跳转等场景

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

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

特点：

• 只能跳转tabBar配置的页面

• 关闭所有非tabBar页面

• 路径后不能带参数

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

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

特点：

• 清空页面栈

• 可以打开任意页面

• 适合应用重启场景

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

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

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

二、路由跳转参数传递

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

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通信（适合复杂数据）

// 发起页面
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

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

4.路由跳转前检查：

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

四、路由跳转最佳实践

1. 封装路由工具函数：

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

   2.路由统一管理：

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

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

   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.页面返回刷新：

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

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

4.路由跳转性能优化：

• 减少不必要的页面跳转

• 预加载可能访问的页面数据

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