位置: IT常识 - 正文

uniapp 常用的路由跳转的几种方式(navigateTo、redirectTo...)(uniapp开发常用案例)

编辑:rootadmin
uniapp 常用的路由跳转的几种方式(navigateTo、redirectTo...)

推荐整理分享uniapp 常用的路由跳转的几种方式(navigateTo、redirectTo...)(uniapp开发常用案例),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:uniapp使用路由,uniapp实战,uniapp总结,uniapp总结,uniapp实战教程,uniapp使用路由,uniapp示例,uniapp常用方法,内容如对您有帮助,希望把文章链接给更多的朋友!

1. uni.navigateTo 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。

示例代码如下:

uni.navigateTo({url:'./home/index'});

注意:

页面跳转路径有层级限制,不能无限制跳转新页面跳转到 tabBar 页面只能使用 switchTab 跳转路由API的目标页面必须是在pages.json里注册的vue页面。如果想打开web url,具体可参考【uniapp官方-路由与页面跳转】

2. uni.navigateBack(关闭当前页面,返回上一页面或多级页面)

示例代码如下:

// 在第3级页面内 navigateBack,将返回第一层页面uni.navigateBack({delta: 2});

注意:

可通过 getCurrentPages()方法 获取当前的页面栈,决定需要返回几层。常用参数delta,默认为1,含义是:返回的页面数,如果 delta 大于现有页面数,则返回到首页。uniapp 常用的路由跳转的几种方式(navigateTo、redirectTo...)(uniapp开发常用案例)

3. redirectTo(关闭当前页面,跳转到其他页面)

示例代码如下:

uni.redirectTo({url:'./home/index'})

注意:

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

4. reLaunch(关闭所有页面,跳转到其他页面)

示例代码如下:

uni.reLaunch({url:'./home/index'})

注意:

需要跳转的应用内页面的路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 ‘path?key=value&key2=value2’转到 tabBar 页面则不能带参数H5端调用uni.reLaunch之后之前页面栈会销毁,但是无法清空浏览器之前的历史记录,此时navigateBack不能返回,如果存在历史记录的话点击浏览器的返回按钮或者调用history.back()仍然可以导航到浏览器的其他历史记录。如果调用了 uni.preloadPage() 不会关闭,仅触发生命周期 onHide

5. switchTab(适用于底部导航栏之间的跳转,或者跳转到底部导航栏(跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。))

示例代码如下:

uni.switchTab({url: './home/index'});

注意:

需要跳转的 tabBar 页面的路径(需在 pages.json 的 tabBar 字段定义的页面),路径后不能带参数 `

更多细节,可参考:【uniapp官方-路由与页面跳转】

本文链接地址:https://www.jiuchutong.com/zhishi/295895.html 转载请保留说明!

上一篇:前端基础,超全html常用标签大汇总(前端的基础知识)

下一篇:uni-app云打包与本地打包(uniapp云打包收费)

免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

鄂ICP备2023003026号

网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

友情链接: 武汉网站建设 电脑维修 湖南楚通运网络