uni-app快速入门(七)--组件路由跳转和API路由跳转及参数传递
uni-app有两种页面路由跳转模式,即使用navigator组件跳转和调用API跳转,API调转不要理解为调用后台接口的API,而是指脚本函数中使用跳转函数。
一、组件路由跳转
1.1 打开新页面
打开新页面使用组件的open-type="navigate",见下面的代码:
<navigator url="/pages/news/index" open-type="navigate" hover-class="navigator-hover">
<button>navigate跳转到新闻页面</button>
</navigator>
如果不在navigator组建中添加open-type属性,则默认为open-type="navigate"
1.2 页面重定向
<navigator url="/pages/news/index" open-type="redirect" hover-class="navigator-hover">
<button>redirect跳转到新闻页面</button>
</navigator>
页面重定向使用了open-type="redirect",注意使用页面重定向不会进入历史记录,不支持
页面返回。
1.3 页面返回
页面返回使用open-type="navigateBack":
<navigator open-type="navigateBack" >
<button type="default">返回</button>
</navigator>
1.4 Tab切换
Tab切换主要用于从当前页面跳转到TabBar中的页面,例如我我的页面跳转到购物车页面:
<navigator url="/pages/cart/index" open-type="switchTab" hover-class="navigator-hover">
<button>跳转到购物车</button>
</navigator>
1.5 reLaunch
open-type设置为reLaunch时,会进行重加载,页面全部出栈,只留下新页面(例如跳转到首页),跳转后的页面不支持页面返回:
<navigator open-type="reLaunch" url="/pages/index/index"><button>reLaunch跳转到首页</button></navigator>
二、API路由跳转
2.1 打开新页面
在button组件中增加一个click方法goPage:
<button @click="goPage('/pages/news/index')">跳转到新闻页面</button>,然后script脚本实现goPage方法,goPage中使用uni.navigateTo实现路由跳转:
<script>
export default{
name:"index",
methods:{
goPage(url){
uni.navigateTo({url:url}) //url中可以带传输,类似html的传参
}
}
}
</script>
2.2 页面重定向
使用uni.redirectTo()方法关闭当前页面,跳转到应用内的某个页面,如果跳转到tabBar页面只能使用switchTab跳转。
2.3 页面返回
使用uni.navigateBack()方法关闭当前页面,返回上一页面或多级页面,并且可以决定需要返回几层:
uni.navigateBack({delta:1})
此方法类似vue中的this.$router.go(-1),其中delta参数表示返回的页面数,如果大于现有页面数则返回到首页。
2.4 Tab切换
使用uni.switchTab()方法跳转到tabBar页面,并关闭所有其他非 tabBar页面。
2.5 reLaunch
使用uni.reLaunch()可以关闭所有页面,接着跳转到应用内的某个页面。
三、参数传递
3.1 接收参数
例如首页跳转到新闻页带参数:
uni.navigateTo({
url:'pages/news/index?id=1&title=新闻'
})
在pages/news/index.vue页面接收参数:
onLoad(opts){
console.log(opts.id)//取id参数
console.log(opts.title)//取title参数
}
需要注意的是,url有长度限制,太长的字符串会传递失败,可以用encodeURIComponent()方法解决,例如url:"pages/news/index?id=1&title="+encodeURIComponent('新闻动态')
接收参数的时候使用decodeURIComponent:
console.log(decodeURLComponent(opts.title))
3.2 获取当前页栈
使用navigateTo()跳转会将页面添加到页面栈中,使用getCurrentPage()获取所有页面栈,第一个页面索引为0,最后进栈的是当前页(索引最大的,索引为总页面栈数量-1):
onLoad(opts){
//获取页面栈
let pages = getCurrentPaes();
//第一个页面
let firstPage = pages[0];
console.log(firstPage.route);//结果pages/index/index
//获取当前页
let currPage = pages[pages.length-1];
console.log(currPage.route);//最后打开的页
}
3.3 解决微信小程序10层跳转限制
微信小程序为解决性能问题,使用navigateTo()方法跳转,其页面限制为10层,解决方案是10页面以内使用navigateTo,超过10页使用redirectTo,例如下面的代码:
组件使用自定义pushPage方法:
<div @click="pushPage('pages/news/index?id=1&title=XXX')">xxx新闻标题</div>
页面脚本:
onLoad(opts){
let pages = getCurrentPages();
//获取页面栈总页数
this.pagesCount = pages.length;
},
methods:{
pushPage(url){
if(this.pageCount>10){
uni.redirectTo({url})
}
else{
uni.navigateTo({url:url})
}
}
}
3.4 解决tabBar不能传参问题
跳转到 tabBar页面是不能传参的,此时可以将参数传入本地缓存实现传参。例如组件中使用<div @click="goPage('pages/index/index','1')">北京店</div>,脚本中goPage:
goPage(url,id){
uni.setStorageSync("branch_shop_id",id);//设置缓存名字branch_shop_id,并将传入的id存入缓存
uni.switchTab({url})
}
然后在接收页面pages/index/index的脚本中接收参数:
onShow(){
let branchShopId = uni.getStorageSync("branch_shop_id");
console.log(branchShopId);
}
本节总结:
本节介绍了uni-app的组件路由跳转、API路由跳转、uni-app接收参数及层级限制,以及tabBar使用本地缓存实现参数传递等。
相关文章:
uni-app快速入门(七)--组件路由跳转和API路由跳转及参数传递
uni-app有两种页面路由跳转模式,即使用navigator组件跳转和调用API跳转,API调转不要理解为调用后台接口的API,而是指脚本函数中使用跳转函数。 一、组件路由跳转 1.1 打开新页面 打开新页面使用组件的open-type"navigate",见下面…...
Flink升级程序和版本
Flink DataStream程序通常设计为长时间运行,如几周、几个月甚至几年。与所有长时间运行的服务一样,Flink streaming应用程序也需要维护,包括修复错误、实现改进或将应用程序迁移到更高版本的Flink集群。 这里就来描述下如何更新Flink streaming应用程序,以及如何将正在运行…...
从0安装mysql server
安装 MySQL Server 首先,你需要在 Ubuntu 上安装 MySQL 服务器。运行以下命令来安装:sudo apt update sudo apt install mysql-server安装完成后,MySQL 服务会自动启动。你可以通过以下命令检查 MySQL 服务是否正在运行: sudo systemctl status mysql如果 MySQL 正在运行,…...

web安全测试渗透案例知识点总结(上)——小白入狱
目录 一、Web安全渗透测试概念详解1. Web安全与渗透测试2. Web安全的主要攻击面与漏洞类型3. 渗透测试的基本流程 二、知识点详细总结1. 常见Web漏洞分析2. 渗透测试常用工具及其功能 三、具体案例教程案例1:SQL注入漏洞利用教程案例2:跨站脚本ÿ…...
PHP访问NetSuite REST Web Services
“同等看待欢乐和痛苦、得到和失去、胜利和失败、投入战斗。以此方式履行职责,你就不会招致任何罪恶。” -Bhagavad Gita 为了帮助PHP开发者快速起步,以REST Web Services方式打通与NetSuite的接口,我们答应给一个样例。但是我是不懂PHP的&a…...

【编译】多图解释 什么是短语、直接短语、句柄、素短语、可归约串
一、什么是短语二、什么是“直接”短语?三、什么是句柄?四、什么是素短语?五、什么是最左素短语可归约串就是“最左素短语” 首先,这些概念 都是相对于【句型】的,都是相对于【句型】的,都是相对于【句型】…...
React中事件绑定和Vue有什么区别?
1. 绑定方式 React:使用jsx语法,通过属性绑定事件。Vue:使用指令(如v-on)在模板中直接绑定事件。 2. 事件处理 React:通过合成事件系统封装原生事件,提供统一的API。Vue:直接使用…...
【DBA攻坚指南:左右Oracle,右手MySQL-学习总结】
处理log file sync等待事件 首先明确什么是log file sync等待事件 从用户提交会话开始,LGWR进程将redo缓存中的信息写入redo日志文件后,LGWR进程通知用户写操作完成,到用户会话接受到LGWR进程通知为止,这整个过程就是可能出现lo…...
C++中的内联函数
在C中,内联函数是一种特殊的函数。 定义 内联函数是在函数定义前加上关键字“inline”的函数。编译器在处理对内联函数的调用时,会尝试将函数体的代码直接插入到函数调用处,而不是像普通函数调用那样,进行跳转指令执行函数体代码…...
ssh.service could not be found“
如果你收到 “ssh.service could not be found” 错误,说明目标主机上没有安装 SSH 服务,或者安装的 SSH 服务的名称不为 ssh。这里有一些解决步骤: 1. 检查 SSH 服务是否已安装 在目标主机上执行以下命令来检查是否安装了 SSH 服务&#x…...
tensorflow有哪些具体影响,和chatgpt有什么关系
### TensorFlow的影响 **1. 深度学习框架的领军者** - **广泛使用**: TensorFlow是由Google开发的开源深度学习框架,广泛应用于各种机器学习任务,包括图像识别、自然语言处理、语音识别等。它是深度学习领域中最受欢迎的框架之一。 - **大规模生产环境*…...

Android OpenGL ES详解——几何着色器
目录 一、概念 1、图元 2、几何着色器 1、输入类型 2、输出类型 3、输出顶点数量最大值限制 二、使用几何着色器 三、应用举例——造几个房子 四、应用举例——爆破物体 1、获取法向量 2、显示法线 五、应用举例——细分三角形 六、应用举例——广告牌技术 一、概…...
Java学生管理系统(GUI和数据库)
Java学生管理系统(GUI和数据库) 本文简介 本资源演示了一个用Java实现的学生管理系统,结合了图形用户界面(GUI)和数据库操作。系统实现了学生、课程和账号三张表的管理功能,包括增删改查等操作。通过本资…...

035_Progress_Dialog_in_Matlab中的进度条对话框
进度条 概念 在使用Matlab开发界面时,有一个很好用的工具就是进度条。在计算过程中,为用户提供计算进度的反馈是改善用户体验的重要手段。 一项进行的计算任务,如果其总体进度是比较容易量化,则可以按照0%~100%的方式࿰…...

【GPTs】Ai-Ming:AI命理助手,个人运势与未来发展剖析
博客主页: [小ᶻZ࿆] 本文专栏: AIGC | GPTs应用实例 文章目录 💯GPTs指令💯前言💯Ai-Ming主要功能适用场景优点缺点 💯小结 💯GPTs指令 中文翻译: defcomplete_sexagenary(年&a…...

如何利用SAP低代码平台快速构建企业级应用?
SAP作为全球领先的企业管理软件解决方案提供商,一直致力于为企业提供全面且高效的业务管理工具。随着技术的快速发展,传统的开发方式已经无法满足企业在快速变化的市场环境下的需求。低代码开发平台应运而生,它通过简化应用程序的创建过程&am…...

Redis设计与实现 学习笔记 第十七章 集群
Redis集群是Redis提供的分布式数据库方案,集群通过分片(sharding,水平切分)来进行数据共享,并提供复制和故障转移功能。 17.1 节点 一个Redis集群通常由多个节点(node)组成,在刚开…...

多端校园圈子论坛小程序,多个学校同时代理,校园小程序分展示后台管理源码
社团活动与组织 信息发布:系统支持社团发布活动信息、招募新成员等,方便社团进行线上线下活动的组织和管理。 增强凝聚力:通过系统,社团成员可以更好地交流和互动,增强社团的凝聚力和影响力。 生活服务功能 二手市场…...

鸿蒙核心技术理念
文章目录 1)一次开发,多端部署2)可分可合,自由流转3)统一生态,原生智能1)一次开发,多端部署 “一次开发,多端部署”指的是一个工程,一次开发上架,多端按需部署。目的是支撑开发者高效地开发多种终端设备上的应用 2)可分可合,自由流转 元服务是鸿蒙系统提供的一…...
8. 基于 Redis 实现限流
在高并发的分布式系统中,限流是保证服务稳定性的重要手段之一。通过限流机制,可以控制系统处理请求的频率,避免因瞬时流量过大导致系统崩溃。Redis 是一种高效的缓存数据库,具备丰富的数据结构和原子操作,适合用来实现…...
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以? 在 Golang 的面试中,map 类型的使用是一个常见的考点,其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
c++ 面试题(1)-----深度优先搜索(DFS)实现
操作系统:ubuntu22.04 IDE:Visual Studio Code 编程语言:C11 题目描述 地上有一个 m 行 n 列的方格,从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子,但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

HBuilderX安装(uni-app和小程序开发)
下载HBuilderX 访问官方网站:https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本: Windows版(推荐下载标准版) Windows系统安装步骤 运行安装程序: 双击下载的.exe安装文件 如果出现安全提示&…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战
在现代战争中,电磁频谱已成为继陆、海、空、天之后的 “第五维战场”,雷达作为电磁频谱领域的关键装备,其干扰与抗干扰能力的较量,直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器,凭借数字射…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”,物流的终极形态正在诞生 想象这样的场景: 凌晨3点,某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径;AI视觉系统在0.1秒内扫描包裹信息;数字孪生平台正模拟次日峰值流量压力…...

【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令,在Linux上安装软件,以及如何在Linux上部署一个单体项目,大多数同学都会有相同的感受,那就是麻烦。 核心体现在三点: 命令太多了,记不住 软件安装包名字复杂&…...
全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec? IPsec VPN 5.1 IPsec传输模式(Transport Mode) 5.2 IPsec隧道模式(Tunne…...

均衡后的SNRSINR
本文主要摘自参考文献中的前两篇,相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程,其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线, n r n_r nr 根接收天线的 MIMO 系…...

论文笔记——相干体技术在裂缝预测中的应用研究
目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术:基于互相关的相干体技术(Correlation)第二代相干体技术:基于相似的相干体技术(Semblance)基于多道相似的相干体…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)
题目 做法 启动靶机,点进去 点进去 查看URL,有 ?fileflag.php说明存在文件包含,原理是php://filter 协议 当它与包含函数结合时,php://filter流会被当作php文件执行。 用php://filter加编码,能让PHP把文件内容…...