微信小程序 导航跳转/路由跳转 及 传参

已于 2022-04-14 16:05:48 修改
阅读量1.6k 收藏 9
点赞数
文章标签： 微信小程序 小程序
于 2022-04-06 16:56:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Shimeng_1989/article/details/123993686
版权
本文介绍了微信小程序中两种导航方式：声明式导航使用<navigator>标签，包括跳转tabBar页面和非tabBar页面；编程式导航利用wx API如wx.navigateTo和wx.switchTab。同时，文章详细讲解了如何传递参数，以及在页面onLoad函数中通过options参数和调试器查看传入参数的方法。
摘要由CSDN通过智能技术生成

  • 声明式导航：<navigator>标签 + 传参方式

  1. * url：必须 "/" 开头（ 跳转的路径）-----（/pages/go/go）✅，（pages/go/go）❎
  2. open-type：navigator (非tabBar页面)。跳转到非tabBar页面可以不写此属性
  3. open-type：switchTab（tabBar页面）。
  4. 后退 / 返回上一级：
    1. open-type="navigateBack"
    2. delta："1"，返回上N级（返回的层级为通过navigator标签跳转的层级）。不写默认返回上一级
    // 跳转到 tabbar 页面
<navigator url="/pages/logs/logs" open-type="switchTab"> logs</navigator>

/
最低0.47元/天 解锁文章
Shimeng_1989
关注
微信小程序开发：路由跳转以及传参的使用详情
软贱开发攻城狮
04-15 1679
微信小程序开发中的大部分知识点和前端开发是一模一样的，就算具体的语法不一样，但是套路都是一样的，可以说微信小程序开发和前端开发使用的知识点基本一致。本篇博文就来分享一下在微信小程序开发中必用的知识点——路由，微信小程序中的路由使用原理和前端JS的路由使用类似，只是具体的使用语法不一样罢了。微信小程序的路由和前端JS的路由性质是一样的，根据路由规则（路径）从一个界面跳转到另外一个界面的规则。
微信小程序开发：路由跳转以及传参的使用
软贱开发攻城狮
03-27 3674
前言 微信小程序开发中的大部分知识点和前端开发是一模一样的，就算具体的语法不一样，但是套路都是一样的，可以说微信小程序开发和前端开发使用的知识点基本一致。本篇博文就来分享一下在微信小程序开发中必用的知识点——路由，微信小程序中的路由使用原理和前端JS的路由使用类似，只是具体的使用语法不一样罢了。 路由的定义 微信小程序的路由和前端JS的路由性质是一样的，根据路由规则（路径）从一个界面跳转到另外一个界面的规则。也就是通常理解的路由指的是分组数据包从源头到目的地时候，决定端到端路径的网络范围的进程，这
微信小程序路由传参
weixin_48952990的博客
07-14 4190
微信小程序路由传参
微信小程序----跳页之tabBar导航跳转
weixin_45343882的博客
08-28 1214
tabBar小程序导航 简介： 小程序是一个多tab标签应用（客户端窗口的底部或顶部有tab栏可以切换页面），可以通过Tabbar配置项指定tab栏的表现，以及tab切换时显示的对应页面。 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置 在小程序配置文件里面可以设置tabBar属性： 案例 接下来挨个看下tabBar配置项下的属性： tabBar配置项属性—...
微信小程序 页面跳转传递值几种方法详解
最新发布
09-04 782
微信小程序页面跳转传递值的几种方法,使用时应根据实际需求选择合适的方法。
微信小程序 【页面导航跳转】
HelloWord176的博客
07-07 1160
微信小程序大致分为四种跳转： wx.navigateTo: 页面跳转保留当前页面（页面隐藏，并未销毁，节省性能），跳转到应用内的某个页面。但是不能跳到tabbar页面，小程序使用页面跳转方法的时候不能添加文件扩展名，否则会没有反应, wx.redirectTo: 页面跳转关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到tabbar页面。优点实时更新 wx.reLaunch：页面跳转关闭所有页面（销毁其他页面），打开到另一个页面。可以进入tabBar定义的...
微信小程序的路由跳转、路由传参
前端泡面人
04-26 3861
1、路由跳转 声明式：就是指标签实现的跳转方式； 编程式：就是指js事件实现的跳转方式； 原生js跳转：（2种） 声明式：a标签 属性href 编程式：location 属性 href vue跳转：（2种） 声明式：router-link 属性to 编程式：this.$router.push 小程序跳转：（2种） 声明式：navigator标签 属性url（跳转的路径）小程序跳转的时候可以用绝对路径；也可以用相对路径...
微信小程序 之 导航跳转
秦璐璐的博客帝国
05-11 383
//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面wx.switchTab({ url: '../index/index' });//关闭当前页面，跳转其他页面wx.redirectTo({ url: '../index/index' })//保留当前页面，跳转其他页面wx.navigateTo({ url: '../index/inde...
js和微信小程序路由（页面）跳转拦截
03-29
在开发微信小程序时，发现官方目前并未提供相应的解决方案，根据以往的经验自己实现了路由（页面）跳转拦截。在此对两者做一个简单的对比。 vue.js的路由拦截  vue.js官方称之为导航守卫。官方文档很详细，使用起来...
微信小程序路径跳转和传参
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
10-14 4300
返回到之前的路径页面 不能是tabBar页面 返回多少次由delta: 1,控制1就是返回到上一次的路径页面。替换当前路径到指定页面 不区分tabBar。删除全部路径到指定页面 不区分tabBar。跳转到一个指定的非tabBar页面。跳转到一个指定的tabBar页面。直接在跳转的路径后面拼接参数。
微信小程序 之间的路由跳转与传参
小火车况且况且况且的博客
03-05 755
微信小程序 之间的路由跳转与传参 小程序之间的路由跳转可以使用两种方法 直接使用标签navigator或者使用路由跳转方法 标签navigator 官方文档 <navigator class="more" open-type="navigate" url="/pages/songSheet/songSheet"> 查看更多 </navigator> 路由跳转...
微信小程序 navigator 跳转url传递参数
08-31
主要介绍了 微信小程序 navigator 跳转url传递参数的相关资料,需要的朋友可以参考下
小程序路由跳转传参
weixin_42796490的博客
08-14 5382
小程序路由跳转传参 wx.navigateTo传参 index页面 wxml data-是来绑定id的 data-id中的id是你自己命名的 后面的{{item.id}}是你从arr数组里面取出来的id <view> <view wx:for="{{arr}}" data-id='{{item.id}}' bindtap="tap"> ...
小程序页面路由传参的方法？
dxn16638400024的博客
10-13 860
这些方法的作用是可以在不同页面之间传递数据，实现页面间的交互和数据共享。通过传参，可以将数据从一个页面传递到另一个页面，以便于展示和处理相关数据。3.全局变量传递：可以在app.js全局定义一个变量，在不同页面之间共享数据。1.URL参数传递：通过在页面跳转的URL中携带参数实现传参。2.打开新页面时传递参数：在打开新页面的时候，可以通过。等跳转方法，并在URL中添加参数。参数将数据传递给新页面。
微信小程序 导航 4种页面跳转 详解
weixin_30363509的博客
04-17 1529
1、wx.navigateTo 保留当前页面，跳转到应用内的某个页面，目前页面路径最多只能十层。 　　参数：url（可携带参数） 、success 、fail 、complete 　　可用wxml代替: <navigator url='test?id=参数' hover-class="none"> //本页面 wx.navigateTo({ url:...
微信小程序路由跳转与传参
dgq2739710006的博客
06-22 355
路由的API wx.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 wx.reLaunch 关闭所有页面，打开到应用内的某个页面 wx.redirectTo 关闭当前页面，不允许跳转到 tabbar 页面 wx.navigateTo 保留当前页面，但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面 wx.navigateBack 关闭当前页面，返回上一页面或多级页面 以上API记不住没关系，有官方文档 https
小程序路由传参
weixin_55553106的博客
07-08 179
wx.navigateto跳转携带参数 toDetail() { wx.navigateTo({ url: ‘../goodsDetail/goodsDetail?id='+ this.id }); } 在详情页接收参数 onLoad(options) { this.goodsId = options.id }, 另外传递多个参数 toDetail() {
微信小程序路由跳转和传递参数
Taoosii的博客
10-22 270
1.navigateTo （有返回键，不可以跳转到tabBar页面） 2.switchTab （没有返回键，只能跳转到tabBar页面，不可以携带参数） 3.reLaunch (跳转任意页面， 没有返回， 有 首页 按钮 4.redirectTo ( 只可以跳转tabBar 页面， 没有返回，但有首页按钮 5.navigateBack (应用在目标页面， delta值为1 ，表示跳转上一页，2表示跳两级 区别 1.wx.navigator是开启一个新页面，那个页面是隐藏了,原页面是onHide,所以是可
微信小程序路由跳转无效的原因
05-25
微信小程序路由跳转无效可能有以下几个原因： 1. 页面路径不正确：在进行跳转时，需要确保页面路径填写正确，包括文件名、文件路径和后缀名等。可以通过打开目标页面的 JSON 配置文件，查看页面路径是否正确。 2. 页面不存在：如果跳转的页面不存在，那么跳转将会无效。需要检查文件路径和文件名是否填写正确，并且确保该页面已经创建并保存。 3. 跳转方式不正确：微信小程序提供了多种跳转方式，包括 wx.navigateTo、wx.redirectTo 等。不同的跳转方式有不同的作用和效果，需要根据具体需求选择合适的跳转方式。 4. 跳转事件绑定不正确：在页面中触发跳转事件时，需要确保事件绑定的正确性。常见的事件绑定方式包括绑定按钮、绑定页面跳转、绑定自定义组件等。 5. 跳转逻辑错误：如果在跳转前有条件判断等逻辑处理，需要确保逻辑正确，否则跳转可能会被阻止或者跳转到错误的页面。 以上是一些常见的导致微信小程序路由跳转无效的原因，建议您在开发过程中仔细检查代码，定位问题并解决。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值