小程序页面导航（路由）

于 2024-03-09 08:54:34 发布
阅读量304 收藏 2
点赞数 9
分类专栏： 微信小程序开发 文章标签： 小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44741577/article/details/136577056
版权
本文详细介绍了在微信小程序中实现页面导航的两种方式，包括声明式和编程式，重点讲解了导航至tabBar页面和非tabBar页面的方法，以及后退导航和传参的处理。
摘要由CSDN通过智能技术生成

文章目录

一、什么是页面导航

image.png

二、小程序中实现页面导航的两种方式

image.png

三、声明式导航

3.1. 导航到 tabBar 页面

image.png

3.2. 导航到非 tabBar 页面

image.png

3.3. 后退导航

image.png

四、编程式导航

4.1. 导航到 tabBar 页面

image.png
image.png

4.2. 导航到非 tabBar 页面

image.png
image.png

4.3. 后退导航

image.png

image.png

五、导航传参

5.1. 声明式导航传参

image.png

5.2. 编程式导航传参

image.png

5.3. onLoad 中接收导航参数

image.png

扶苏1002
关注
专栏目录
微信小程序开发中的路由与页面跳转方法
2401_85258012的博客
06-03 723
在小程序中，一个完整的应用是由多个页面组成的。使用redirectTo方法进行页面跳转后，当前页面的生命周期函数onUnload将会被触发，而新页面的生命周期函数onLoad和onShow将会被触发。相对路径是相对于当前页面的路径，以“../”或“./”开头，表示跳转到当前页面的某个子页面。在上述的路由方法中，我们都会传递一个url参数来指定目标页面的路径，这个参数是非常重要的。需要注意的是，每个页面的生命周期函数只有在页面被打开时才会触发，如果页面已经打开过，再次跳转到该页面时不会触发生命周期函数。
vue路由自动生成
程序猿的日常记录
06-04 3185
在写vue项目时，遇到页面跳转很多，需要配置很多路由，一个一个路由配置的话非常麻烦，修改起来也不方便。如下所示： export default new Router({ routes: [ {path: '/', name: 'home', component: require('@/pages/home.vue')}, {path: '/demo1', name:...
微信小程序----底部路由导航
weixin_45328831的博客
07-02 469
底部路由跳转 那个文件需要跳转，就要在app.json文件中引入 { "pages":[ "pages/index/index", "pages/list/list", "pages/cart/cart", "pages/my/my", "pages/logs/logs" ], // 底部 路由 "tab...
【小程序从0到1】视图与逻辑｜路由导航（声明式、编程式）
Coding and studying
10-22 1039
上篇文章详细讲解了微信小程序的首页布局案例的实现，这篇文章将带领大家学习的是小程序的「路由导航」
微信小程序开发学习之页面导航（声明式导航和编程式导航）
最新发布
m0_63622279的博客
07-12 2105
open-type 的值必须为 navigateBack ,表示要进行后退导航，delta的值必须为数字，表示后退的层级。通过声明式导航传参或编程式导航传参所携带的参数，可以直接在 onLoad 事件中直接获取到。编程式导航传参也是一个道理，我就拿一个wx.switchTab()来举例，其余也都是一样的。使用navigator组件传递参数，直接在其url上面拼接参数即可，例如。即可，其Object对象的参数与上面的switchTab一样。tabBar 页面指的是被配置为 tabBar 的页面。
【微信小程序】基础篇 -- 页面导航 -- 编程式导航（二十三）
JMFive的博客
03-05 2775
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第23篇文章;今天开始学习微信小程序的第九天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
入门微信小程序二（页面导航，事件，生命周期，wxs脚本）
十九万里的博客
04-22 852
知识点： 1、页面导航 2、页面事件 3、生命周期 4、wxs脚本 注： 文章是看了b站视频后做的笔记 需要看原视频的同学可以点下面链接观看 零基础玩转微信小程序 一、页面导航 1、页面导航概念： 页面导航指的是页面之间的相互跳转。例如，浏览器中实现页面导航的方式有如下两种： ① 链接 ② location.href 小程序中实现页面导航的两种方式： ① 声明式导航:在页面上声明一个 导航组件，通过点击 组件实现页面跳转 ② 编程式导航：调用小程序的导航 API，实现页面的跳转 2、声
js和微信小程序路由（页面）跳转拦截
03-29
在开发微信小程序时，发现官方目前并未提供相应的解决方案，根据以往的经验自己实现了路由（页面）跳转拦截。在此对两者做一个简单的对比。 vue.js的路由拦截  vue.js官方称之为导航守卫。官方文档很详细，使用起来...
微信小程序页面路由demo
04-24
在这个"微信小程序页面路由demo"中，我们将深入探讨这一主题。 首先，我们要理解什么是页面路由。在计算机科学中，路由通常指的是网络数据包的路径选择，但在Web开发中，尤其是单页应用（SPA）或像微信小程序这样的...
微信小程序 导航跳转/路由跳转 及 传参
Shimeng_1989的博客
04-06 1708
声明式导航：<navigator>标签 url：必须 "/" 开头（ 跳转的路径） open-type：必须为 navigator (跳转的方式)。跳转到非tabBar页面可以不写此属性 后退 / 返回上一级： open-type="navigateBack" delta："1"，返回上N级（返回的层级为通过navigator标签跳转的层级）。不写默认返回上一级 // 要进行跳转的页面 <navigator url="/pages/myfood/myfood">..
小程序无限层级路由方案
03-29
【小程序无限层级路由方案】是针对微信小程序原生页面层级限制的一种解决策略。小程序原生框架规定页面层级不得超过10层，这样的限制对于内容丰富、交互复杂的小程序来说，往往容易引发路径溢出问题，影响用户体验。...
微信小程序中导航---- 声明式，编程式导航
qq_44821064的博客
06-01 169
后退导航是在非tarbar页面中才可以调用 wx.navigateBack()导航到tarbar,和非tarbar页面中open-type的设置。编程式导航，导航到tarbar页面使用wx.switchTab。声明式导航 导航到tarbar页面使用wx.navigateto。
【微信小程序】一文读懂页面导航
weixin_62542181的博客
08-10 4244
本文讲解了微信小程序中页面导航，包括页面导航中的声明式导航和编程式导航，以及导航传参，内附示范
微信小程序导航组件 navigator使用
weixin_45534301的博客
10-29 8502
微信小程序 导航组件 navigator使用
微信小程序 三 声明式导航、编程式导航及导航传参、下拉刷新、上拉触底事件、自定义编译模式、应用和页面生命周期函数、内嵌 和 外联 的 WXS 脚本、案例
m0_55170432的博客
07-06 1816
1.0 页面导航 1. 什么是页面导航 页面导航指的是页面之间的相互跳转。例如，浏览器中实现页面导航的方式有如下两种： ① <a> 链接 ② location.href 1.1 小程序中实现页面导航的两种方式 声明式导航 在页面上声明一个 导航组件 通过点击 组件实现页面跳转 编程式导航 调用小程序的导航 API，实现页面的跳转 1.2 页面导航 - 声明式导航 1. 导航到 tabBar 页面 tabBar 页面指的是被配置为 tabBar 的页面。 在使用 组件跳转到指定的 tab
小程序页面跳转---导航，路由
yaomengzhi的博客
06-02 5951
小程序中所有页面的跳转都是通过路由的方式进行页面切换，又框架进行管理。页面栈框架以栈的形式维护当前所有页面，当需要路由切换时，页面栈表现如下  1、初始化页面  新页面入栈  小程序打开时会自动创建  2、打开新页面 新页面入栈    3、页面重定向 当前页面出栈，新页面入栈   4、页面返面 页面不断出栈，直到返回Tab页面  5、Tab切换   页面全部出栈，只留下新的Tab页面  6、重加载...
小程序知识点梳理
jie_ge_a的博客
10-22 231
小程序知识点 一、配置 1.配置tap导航 //在app.json页面 "tabBar": { "list": [{ "pagePath": "home/index", //路径 "text": "首页", //名称 "selectedIconPath": "./pages/img/shouye1.png", //点击出现的图片 "iconPath": "./pages/img/shouye.png" //未点击出现的图片 }, {
微信小程序页面路由
sdasadasds的博客
04-20 7300
微信小程序——页面路由 什么是路由？ 路由（routing）是指分组从源到目的地时，决定端到端路径的网络范围的进程。我们可以理解微信小程序页面路由，根据路由规则（路径）从一个页面跳转到另一个页面的的规则。 一、哪些会触发页面跳转 小程序启动，初始化第一个页面 跳转新页面，调用wx.navigateTo 或者 <navigator /> 页面重定向，调用wx.redirectTo 或者 <navigator /> 页面返回，调用wx.navigateBack ,页面左上角返回按
微信小程序之页面路由
weixin_37049906的博客
08-11 5748
小程序的路由可以理解为：根据路由规则（路径）从一个页面跳转到另一个页面的规则。一、微信小程序中页面跳转的方法：（1）wx.navigateTo(OBJECT) 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。 示例代码：wx.navigateTo({ url:'test?id=1'//实际路径要写全 })//test.js Page({ on
小程序页面路由详解：触发与操作指南
在理解小程序页面路由之前，首先需要明确其与网络中的路由概念相似，但针对的是小程序内的交互逻辑，即通过预定义的路径规则来决定从一个页面到另一个页面的移动方式。 1. **页面跳转触发条件**: - 当小程序启动时...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值