首页 > 其他分享 >uni-app中 navigateTo、reLaunch、redirectTo、switchTab几种页面路由方式的区别

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

时间:2024-10-10 22:33:20浏览次数:11  
标签:navigateTo switchTab redirectTo tabBar 跳转 页面

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 页面之间的切换。

标签:navigateTo,switchTab,redirectTo,tabBar,跳转,页面
From: https://www.cnblogs.com/eminer/p/18457339

相关文章

  • 使用 navigateTo 实现灵活的路由导航
    title:使用navigateTo实现灵活的路由导航date:2024/8/13updated:2024/8/13author:cmdragonexcerpt:摘要:本文详细介绍Nuxt.js中的navigateTo函数,包括基本用法、在路由中间件中使用、导航到外部URL和新标签页打开链接的方法,以及参数详解和注意事项,展示了该函数......
  • uniapp 路由uni.navigateTo 传参
    1.传递一个参数 letindex=1;uni.navigateTo({url:`../address/address?key=${index}`})接收一个参数onLoad(e){console.log(e.index)}2.传递两个参数letnamename="loadVessel"letidid="1"uni.navigateTo({url:`......
  • 微信小程序 wx.navigateto无法跳转 原因如下:
     wx.navigateto无法跳转报错问题:"wx.navigateto无法跳转"可能的原因和解决方法如下: 错误的使用方式:确保你使用的是wx.navigateTo而不是wx.navigateto,注意大小写。  目标页面不存在或路径错误:检查你要跳转的页面路径是否正确,确保在app.json中已经声明。......
  • uni-app混合开发 navigateTo、reLaunch、redirectTo、switchTab区别
    1.navigateTo  保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。要注意的是navigateTo只能跳转的应用内非tabBar的页面的路径,路径后可以带参数;如果跳转url参数为tabBar的路径则无法进行跳转2.redirectTo关闭当前页面,跳转到应用内的某个页面。......
  • 微信小程序页面跳转:wx.switchTab、wx.reLaunch、wx.redirectTo、wx.navigateTo、wx.na
    引言在微信小程序开发中,页面跳转是一项基础且常用的功能。本文将介绍微信小程序中五种常见的页面跳转方式,并分析它们的使用场景和区别。1.wx.switchTab(跳转主页)wx.switchTab方法用于跳转到tabBar页面,并关闭其他所有非tabBar页面,通常用于跳转到小程序的主页。特点:关闭......
  • .net core Razor Page TempData不工作,RedirectToPage后无法获取值怎么办?
    问题:.netcore旧项目更新到.netcore8.0后,发现之前的错误反馈信息显示不出来了,经过反复搜索,询问人工智能无果。之前怀疑/测试过:1.新版浏览器chrome访问https://localhost是否限制了Cookie2.浏览器是否受欧盟Cookie法规的要求进行了限制。3.写法错误RazorpageTempData......
  • 问题(小程序):Uncaught (in promise) thirdScriptError {"errMsg":"redirectTo:fail can
    这个是跳转出现了问题,点击之后跳转不过去。解决办法:换一种跳转方式。方式一:wx.redirectTo:关闭当前所在页面,再跳转到指定的非TabBar页面。不受页面层数限制。方式二:wx.navigateTo:不关闭当前所在页面,跳转到指定的非TabBar页面,注意页面路径限制是五层。方式三:wx.switchTab:只可以......
  • 解决微信小程序使用switchTab跳转后页面不刷新的问题
    wx.switchTab({url:‘../index/index’,success:function(e){varpage=getCurrentPages().pop();if(page==undefined||page==null)return;page.onLoad();}})switchTab成功跳转后调用success,此时可以拿到跳转后页面......
  • 关于uni-app与vue路由配置的不同,不使用uni.navigateTo接口跳转时,使用this.$router.pus
    之前用vue写router路由的时候,先配置一个路由表,然后再将配好的路由push到已有的组件里面,再通过<RouterView></RouterView>方法将每一个调用的路由的内容渲染到父组件要用的位置。今晚我在用uni-app的时候,突然不想用uni-app自己提供的路由跳转方法:uni.navigateTo我想用vue那种路由......
  • 微信小程序跳转到另一个小程序 wx.navigateToMiniProgram 方法,调试
    wx.navigateToMiniProgram(Objectobject)需要页面权限:小程序不能在插件页面中调用该接口,插件也不能在小程序页面中调用该接口打开另一个小程序wx.navigateToMiniPro......