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 是一种高效的缓存数据库,具备丰富的数据结构和原子操作,适合用来实现…...

UE5 学习系列(二)用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...

stm32G473的flash模式是单bank还是双bank?
今天突然有人stm32G473的flash模式是单bank还是双bank?由于时间太久,我真忘记了。搜搜发现,还真有人和我一样。见下面的链接:https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...
C++:std::is_convertible
C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...

DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API,查询的是单条数据,比如根据主键ID查询用户信息,sql如下: select id, name, age from user where id #{id}API默认返回的数据格式是多条的,如下: {&qu…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况,可以通过以下几种方式模拟或触发: 1. 增加CPU负载 运行大量计算密集型任务,例如: 使用多线程循环执行复杂计算(如数学运算、加密解密等)。运行图…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...