uni-app中 navigateTo、reLaunch、redirectTo、switchTab几种页面路由方式的区别

navigateTo

  • 作用:用于在当前页面内跳转到应用内的某个页面,使用 wx.navigateTo 跳转时,会把当前页面压入栈中,用户可以通过返回按钮或navigateBack 回到上一个页面。
  • 限制:不能跳转到 tabBar 页面。如果尝试跳转到 tabBar 页面,会没有反应或报错(具体取决于框架的实现)。
  • 使用场景:通常用于从一个列表页面跳转到详情页面等非 tabBar 页面。

redirectTo

  • 作用:关闭当前页面,跳转到应用内的某个页面。目标页面会成为当前页面栈的顶部页面。与 wx.navigateTo 不同的是,它不会把当前页面压入栈中,因此用户无法通过返回按钮回到上一个页面。
  • 限制:同样不能跳转到 tabBar 页面。
  • 使用场景:适用于需要完全替换当前页面而不希望用户能够返回的场景,如从列表跳转到详情页面并希望用户不能通过返回操作回到列表页面。

switchTab

  • 作用:用于跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
  • 限制:只能跳转到 tabBar 中定义的页面。
  • 使用场景:适用于需要在 tabBar 页面之间切换的场景,如从首页切换到个人中心。
  • switchTab打开一页面后,系统会为该页面建立一个新页面栈,采用返回方式走到该页面栈尽头后,再次点击返回会返回到上个页面栈的栈顶页面。
  • 参数传递:由于 switchTab 会关闭其他页面,因此通过 URL 参数直接传递复杂数据并不合适。通常,通过全局状态管理(如 Vuex、Redux 或小程序的全局变量)来共享数据。

reLaunch

  • 关闭所有页面,打开到应用内的某个页面。

  •  

    跳转页面会刷新页面

  •  

    需要跳转的应用内页面路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 ‘path?key=value&key2=value2’,与redirectTo不同的是如果跳转的页面路径是 tabBar 页面则不能带参数

总结

  • navigateTo 和 redirectTo 主要用于非 tabBar 页面之间的导航。
  • switchTab 用于 tabBar 页面之间的切换。
posted @ 2024-10-10 22:40  网风笔记开发者  阅读(248)  评论(0编辑  收藏  举报