小程序路由分类和路由跳转传参

最新推荐文章于 2024-03-14 05:00:00 发布
最新推荐文章于 2024-03-14 05:00:00 发布
阅读量211 收藏 1
点赞数
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51366526/article/details/109233395
版权
本文介绍了微信小程序中的五种路由跳转方式：wx.switchTab、wx.reLaunch、wx.redirectTo、wx.navigateTo和wx.navigateBack，并分别提供了详细参数示例，帮助开发者理解如何在小程序中实现页面间的跳转和传递参数。
摘要由CSDN通过智能技术生成

小程序路由分类和路由跳转传参

微信小程序的路由跳转总共有5种，他们分别为wx.switch Tab， wx.reLaunch，wx.redirectTo , wx.navigateTo, wx.navigateBack

（1）wx.switchTab(Object object)
跳转到tabBar页面，并关闭其他所有非tabBar页面

官方文档中给出的参数：
在这里插入图片描述

例如：
{
“tabBar”: {
“list”: [{
“pagePath”: “index”,
“text”: “首页”
},{
“pagePath”: “other”,
“text”: “其他”
}]
}
}
wx.switchTab({
url: ‘/index’
})

（2）wx.reLaunch(Object object)
关闭所有页面，打开到应用内的某个页面

官方文档中给出的参数：在这里插入图片描述
例 ：wx.reLaunch({ <

最低0.47元/天 解锁文章
Lily永不秃头
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序封装路由文件和路由方法，5种路由方法全解析
weixin_33843409的博客
05-25 499
小程序5种路由方法使用场景，封装路由文件和路由方法，提升小程序体验和开发效率 明确要解决的问题 每次使用路由时，总是粘贴复制路径，这样在路径有修改时，需要修改所有用到该路径的地方，维护成本高 路由跳转时拼接参数让人头大，业务复杂时要拼接十几个参数 路由返回，只会返回一层，不能直接返回到目标页面，因为不知道目标页面是否在路由栈中，也不知道在第几层 这些问题都可以通过封装路由文件和路由方法解决，提...
小程序路由的几种方式
immocha的博客
05-09 1974
wx.switchTab(Object object) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。只支持在app.json中tabBar中页面跳转 url:需要跳转的 tabBar 页面的路径 (代码包路径)（需在 app.json 的 tabBar 字段定义的页面），路径后不能带参数。 // app.json { "tabBar": { "list": [{ "pagePath": "index", "text": "首页" },{
微信小程序页面跳转与传参笔记
weichaoya的博客
04-11 1069
从tabBar/非tabBar页面跳转到tabBar页面，无参数，使用wx.switchTab/wx.reLaunch 从tabBar/非tabBar页面跳转到tabBar页面，有参数， 使用wx.switchTab，参数使用globalData/storge； 使用wx.reLaunch，参数使用url传参 从tabBar页面跳转到非tabBar页面，无参数， 使用wx.navigateTo,wx.redirectTo,wx.reLaunch 从tabBar页面跳转到非tabBar页面，有参数， 使.
微信小程序开发系列（三十一）·页面跳转API（wx.navigateTo、wx. redirectTo、wx.switchTab、wx.reLaunch、wx.naviga）以及如何进行参数传递
最新发布
时光の尘的博客
03-14 6294
分隔，例如：path?key=value&key2=value2 参数需要在跳转到的页面的 onLoad 钩子函数中通过形参进行接收。关闭（销毁）当前页面，跳转到应用中其他页面，不能跳转到tabBar页面。保留当前页面，跳转到应用中其他页面，不能跳转到 tabBar 页面。保留当前页面，跳转到 tabBar 页面，不能跳转到应用中其他页面。也可以在跳转到的页面的 onLoad 钩子函数中通过形参进行接收。如何返回多级页面呢？关闭当前页面，返回上一页或者返回多级页面，默认返回上一页。
wx.navigateTo、wx.redirectTo、wx.reLaunch的event参数的理解
qq_41988669的博客
01-06 359
最后, 我所说的父方法, 子方法, 其实都是定义在eventChannel上的, 这样说只是方便大家理解, 父页面应该也也是可以通过emit去触发自己在events里面定义的方法的, 但是这样没有意义, 所以, 我就不做测试了,因为没有人会傻到自己跟自己通信吧, 哈哈哈…遇到一个这样的业务需求, 用户点击提现按钮, 跳转到提现处理结果页面, 为了避免提现请求被重复提交, 所以需要在用户点击了提交按钮以后就把按钮锁起来不给用户提交, 在拿到请求结果以后再把按钮打开。于是测试, 无果(有兴趣的同学可以试试)
小程序基础篇之页面路由
03-29
借用上面的定义，我们可以理解小程序页面路由，根据路由规则（路径）从一个页面跳转到另一个页面的的规则。通过本篇文 ...       什么是路由？ 我们通常理解的路由指分组数据包从源到目的地时，决定端到端路径的...
微信小程序开发（二）：页面跳转并传参操作示例
12-28
本文实例讲述了微信小程序页面跳转并传参操作。分享给大家供大家参考，具体如下： 本篇文章主要记录：保留当前页面，跳转到应用内的某个页面的。。路由。跳转后的页面将在标题栏左上角带一个返回按钮。 wx.navigate...
微信小程序实现点击文字页面跳转功能【附源码下载】
11-27
微信小程序官方文档对于 `navigator` 组件有详细的说明，包括其他可用属性和用法，如传参、自定义跳转行为等。开发者可以通过查阅官方文档（https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html）...
京东小程序源码，+截图
05-26
页面间的跳转和传参是小程序开发中的关键部分。通过wx.navigateTo、wx.redirectTo、wx.switchTab等API实现页面间导航。 7. **样式设计**： WXSS类似于CSS，但具有微信特有的一些扩展，如rpx单位适应不同设备屏幕...
微信小程序 页面传值详解
11-30
微信小程序 页面传值详解 一. 跨页面传值. 1 . 用 navigator标签传值或 wx....”以前的字符串, 这个问题我猜想可能是小程序内部的路由处理 对这个”?”敏感吧 好, 这是第一种 依靠跳转的url带参数传值 2 . 用getCur
【小程序】wx.reLaunch()、wx.showModal()
Milk~每天分享一点点，技术进步一点点
08-18 2562
wx.reLaunch(Object object) 关闭所有页面，打开到应用内的某个页面 应用场景：登陆跳转到其他页面 参数（红色框为常用） 示例代码： wx.reLaunch({ url: 'test?id=1' }) Page({ onload(option) { console.log(option.query) } }) wx.showModal(Object object) 显示模态对话框 应用场景：小程序初始化时授权登录提醒 参数（红色框为常用）
微信小程序开发系列（十一）·小程序页面的跳转设置以及参数传递
时光の尘的博客
03-02 6655
1. 路径后可以带参数。分隔,参数键与参数值用= 相连,不同参数用&分隔例如: /list?· redirect： 关闭当前页面，跳转到应用内的某个页面。· navigate：保留当前页面，跳转到应用内的某个页面。· switchTab:跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。· navigateBack:关闭当前页面，返回上一页面或多级页面。· reLaunch:关闭所有页面，打开到应用内的某个页面。navigate：保留上一级页面，因此还能够返回上一级页面。
微信小程序页面之间传参的几种方式
01-10 5223
A页面部分js代码B页面部分js代码。
uniapp获取当前页面路由及参数
wilL-my的博客
06-19 1万+
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组 let curRoute = routes[routes.length - 1].route //获取当前页面路由 let curParam = routes[routes.length - 1].options; //获取路由参数 // 拼接参数 let param = '' for (let key in curParam) { param += '&' + key + '=' + cu.
微信小程序：页面跳转以及页面间值传递（wx.navigateTo、wx.redirectTo、wx.reLaunch）
傲笑风的博客
04-20 6322
摘要 当一个小程序存在多个页面时，一般会有页面跳转功能，通常是通过绑定一个事件来触发（如绑定一个按钮，按下按钮后跳转到其它页面）；本文详细讲解一下关于微信小程序如何实现页面跳转，以及页面跳转后实现页面之间进行值传递，还有讲解一下官方给出的三个页面跳转函数的区别。 三个页面跳转的函数 官方给出了三个页面跳转函数，分别是：wx.navigateTo、wx.redirectTo、wx.reLaunch；...
uniapp开发微信小程序问题笔记-页面跳转传参
力挽狂澜的POWER
08-07 1815
举例：点击页面跳转并传参，跳转页面从onLoad中的option接收参数 isgas 父子组件的数据交互 在之前的博客里简单介绍过父子通信方法：父传子props,子传父$emit这里再补充一个父调用子组件的方法 $refs子组件myarcbar中定义了方法：getServerData()父组件中调用该方法：子组件引用在uniapp中，和vue不同的是，不需要显式import组件，会自动引用this.$refs.myarcbar.getServerData();.........
小程序路由wx.reLaunch(Object object)跳转问题
热门推荐
朱磊的博客
11-20 1万+
问题：调用wx.relaunch报错:fail can not invoke relaunch in background 场景：在界面A调用微信支付 -&gt; 跳转到微信支付页面 -&gt; 用户点击支付 -&gt; 支付成功回到A界面 -&gt; 收到支付成功的回调 -&gt; 调用wx.reLaunch(Object object) 报错log：fail can not invoke re...
【微信小程序】几个路由函数（wx.switchTab、wx.reLaunch、wx.redirectTo、wx.navigateTo、wx.navigateBack）的用法
hellocc233的博客
05-05 7790
在微信公众平台的小程序开发文档里，目前微信提供的路由函数有5个，由于本人在编写代码的时候碰到了问题（花了近一个早上才找到了解决方案，所以想记录下就这个问题），顺便再重新上去查阅了下，记录下这个几个函数的用法。 ①首先是wx.switchTab，用这个函数的前提是，你的app.json下要添加tabBar并且有list（里面的属性一般不能少于2个，但是也不能多于5个），也就是说你的小程序要有底部导...
微信小程序 wx.reLaunch 执行前几个页面的 onUnload 钩子
FE-阿阳的博客
09-10 6131
微信小程序 wx.reLaunch 执行前几个页面的 onUnload 钩子 解决方案 有种场景：页面 A =&gt; B =&gt; C =&gt; D, 当在 C 页面调用 wx.reLaunch({url:’/pages/D’}) 时，页面 A 、B、C 的 onUnload 事件都会执行，这是小程序的触发规律，根据自己业务场景看需要怎么处理一些事情。...
uniapp小程序路由传参
11-28
uniapp小程序路由传参有以下几种方式： 1.在url中携带参数 ```javascript // 跳转到目标页面 uni.navigateTo({ url: '/pages/target/target?id=123&name=zhangsan' }) ``` 在目标页面中可以通过`this.$route.query`获取参数值： ```javascript console.log(this.$route.query.id) // 输出：123 console.log(this.$route.query.name) // 输出：zhangsan ``` 2.使用params传参 ```javascript // 跳转到目标页面 uni.navigateTo({ url: '/pages/target/target', params: { id: 123, name: 'zhangsan' } }) ``` 在目标页面中可以通过`this.$route.params`获取参数值： ```javascript console.log(this.$route.params.id) // 输出：123 console.log(this.$route.params.name) // 输出：zhangsan ``` 3.使用query传参 ```javascript // 跳转到目标页面 uni.navigateTo({ url: '/pages/target/target', query: { id: 123, name: 'zhangsan' } }) ``` 在目标页面中可以通过`this.$route.query`获取参数值： ```javascript console.log(this.$route.query.id) // 输出：123 console.log(this.$route.query.name) // 输出：zhangsan ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值