页面跳转的几种用法区别

简介: 一. my.navigateTo: 保留当前页面,跳转到应用内的某个页面,路径后可带参数;使用 abridge.navigateBack 可以返回到原页面; 示例代码:  my.navigateTo({ url: 'test?id=1' }) 二.

一. my.navigateTo: 保留当前页面,跳转到应用内的某个页面,路径后可带参数;使用 abridge.navigateBack 可以返回到原页面; 示例代码: 

 my.navigateTo({
      url: 'test?id=1'
    })

 二. my.redirectTo: 关闭当前页面,跳转到应用内的某个页面,路径后可带参数,但是不能返回原页面; 示例代码: 

my.redirectTo({
      url: 'test?id=1'
    })

  三. my.navigateBack: 关闭当前页面,返回上一页面或多级页面;可通过 Page.getCurrentPages 获取当前的页面栈,决定需要返回几层;返回的页面数,如果 delta 大于现有页面数,则返回到首页。 示例代码:  

// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码 
// 此处是A页面
    my.navigateTo({ url: 'B?id=1' }) 
// 此处是B页面 
    my.navigateTo({ url: 'C?id=1' }) 
// 在C页面内 navigateBack,将返回A页面 
    my.navigateBack({ delta: 2 }) 
// 在C页面内 navigateBack,将返回A页面
     my.navigateBack({ delta: 2 })

  四. my.switchTab: 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面;跳转的页面需要在app.json的tabBar中声明的页面且路径后不能带参数 app.json代码示例: 

// app.json
 { "tabBar": 
 { "items": 
 [{ "pagePath": "home", "name": "首页" },
 { "pagePath": "user", "name": "用户" }
 ] } }

  示例代码:  

 my.switchTab({
      url: '/home'
    })

 注意: 

1. 通过页面跳转或者页面重定向所到达的页面,即使它是定义在 tabBar 配置中的页面,也不会显示底部的 tab 栏;

 2. 调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会;

 3. my.navigateTo 和 my.redirectTo 不允许跳转到 tabbar 页面,只能用 my.switchTab 跳转到 tabbar 页面; 

4.my.switchTab跳转的页面需要在app.json的tabBar中声明的页面且路径后不能带参数; 如还有遗漏请留言补充,我会尽快更新,如果官方有新的内容我会及时关注更新,谢谢各位看官啦!

目录
相关文章
|
缓存 JavaScript 前端开发
Vue系列(二)之 基础语法上篇【插值,指令,过滤器,计算属性监听属性】以及购物车实现
Vue系列(二)之 基础语法上篇【插值,指令,过滤器,计算属性监听属性】以及购物车实现
|
2月前
|
UED 开发者
ArkTS路由跳转与参数传递:深入理解与实践
在HarmonyOS应用开发中,ArkTS作为主要开发语言,其路由跳转和参数传递机制是实现页面间通信的关键。本文深入探讨了ArkTS中的路由跳转基础,包括页面跳转的方式(如pushUrl和replaceUrl)、参数传递的方法,以及如何在实际开发中应用这些知识,帮助开发者提升应用的用户体验和性能。
314 1
|
3月前
|
存储 小程序 JavaScript
小程序中页面传参的方式你都知道吗
小程序中页面传参的方式你都知道吗
49 0
|
4月前
|
JavaScript 网络架构
路由传参及跳转方式
路由传参及跳转方式
|
5月前
|
JavaScript 前端开发
JavaScript 地址信息与页面跳转及跳转传参
JavaScript 地址信息与页面跳转及跳转传参
41 1
|
6月前
|
小程序 数据库 C++
【微信小程序-原生开发】实用教程16 - 查看详情(含页面跳转的传参方法--简单传参 vs 复杂传参)
【微信小程序-原生开发】实用教程16 - 查看详情(含页面跳转的传参方法--简单传参 vs 复杂传参)
58 0
架构-----页面之间实现跳转,Vue3如何实现快速跳转页面,将事件绑定在从你开始跳转的页面
架构-----页面之间实现跳转,Vue3如何实现快速跳转页面,将事件绑定在从你开始跳转的页面
|
8月前
|
JSON 小程序 JavaScript
微信小程序页面传参(多条数据的传递)
本文介绍了微信小程序中页面间参数传递的方法。1) 单个数据传递:通过`wx.navigateTo`将ID拼接在URL中传递,接收页面在`onLoad`中获取。2) 多个参数传递:将数据转换为JSON字符串,然后通过URL参数传递,接收页面同样在`onLoad`中解析JSON恢复数据。3) 提到了JSON作为数据交换格式的基础知识。全文鼓励读者尝试并点赞。
598 1
|
JavaScript
vue路由跳转传参的方式有哪些
vue路由跳转传参的方式有哪些
|
8月前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集

热门文章

最新文章

下一篇
开通oss服务