探讨uniapp的路由与页面栈及参数传递问题

1首先引入页面栈

框架以栈的形式管理当前所有页面, 当发生路由切换的时候,页面栈的表现如下:

在这里插入图片描述
页面的路由操作无非:初始化、打开新页面、页面重定向、页面返回、tab切换、重加载。

2页面路由

uni-app 有两种页面路由跳转方式:使用navigator组件跳转、调用API跳转。

2.1navigator

页面跳转。该组件类似HTML中的<a>组件,但只能跳转本地页面。目标页面必须在pages.json中注册
在这里插入图片描述
在这里插入图片描述

  • 跳转tabbar页面,必须设置open-type=“switchTab”

3 路由跳转

  • navigateTo, redirectTo 只能打开非 tabBar 页面。
  • switchTab 只能打开 tabBar 页面。
  • reLaunch 可以打开任意页面。
  • 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
  • 不能在 App.vue 里面进行页面跳转。

3.1 navigate

保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。
在这里插入图片描述
初始状态:
在这里插入图片描述
点击页面跳转几次:
在这里插入图片描述
注意传值问题:是可以传值的
在这里插入图片描述
我们使用出栈操作 uni.navigateBack
在这里插入图片描述

3.2 redirect

关闭当前页面,跳转到应用内的某个页面。

toNavigate() {uni.redirectTo({url: '/pages/one/one?name=FOUR'});
},

在这里插入图片描述
注意:这里页面回退操作将无法起作用,因为页面栈中已经不存在之前的页面了!!!
那么这里会传值过来吗?我们验证一下: 是可以的
在这里插入图片描述

3.3 switchTab

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。

首先我们验证非tarbar页面的跳转:

toNavigate() {uni.switchTab({url: '/pages/one/one?name=INDEX'});
},

这里将报错:switchTab:fail can not switch to no-tabBar page
在这里插入图片描述
我们这里跳转tarbar页面:
首先我们配置一下tarbar的配置:
在这里插入图片描述
针对跳转tarbar页面的路由传值问题:这里是不会传值的
在这里插入图片描述

3.4 reLaunch

关闭所有页面,打开到应用内的某个页面。
针对于 tarbar页面
在这里插入图片描述
针对于非tarbar页面 与上面的行为保持一致
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/111696.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【实训项目】精点考研

1.设计摘要 如果说高考是一次能够改变命运的考试&#xff0c;那么考研应该是另外一次。为什么那么多人都要考研呢&#xff1f;从中国教育在线官方公布是考研动机调查来看&#xff0c;大家扎堆考研的原因大概集中在这6个方面&#xff1a;本科就业压力大&#xff0c;提升竞争力、…

视频汇聚/视频云存储/视频监控管理平台EasyCVR视频平台添加萤火云设备的具体操作步骤

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…

解析肖特基二极管NRVBS360BNT3G整流器的优缺点及应用

何为肖特基二极管整流器&#xff1f; 是一种常用的电子器件&#xff0c;用于将交流信号转换为直流信号。它由一个PN结和一个金属接触组成&#xff0c;具有较低的正向压降和快速的开关特性。 在正向偏置下&#xff0c;肖特基二极管具有较低的正向压降&#xff0c;通常为0.3-0.…

笔记本电脑功率怎么看?记好这2个方法!

在使用笔记本电脑时&#xff0c;其功率是一个很重要的指标。笔记本电脑功率是影响其性能、续航和热管理的重要因素。不同的功率水平可以带来不同的使用体验。 本文将解释不同的笔记本电脑功率对设备的影响&#xff0c;并详细介绍几种查看笔记本电脑功率的方法。继续往下看吧&a…

安全生产作业现场违规行为识别 opencv

安全生产作业现场违规行为识别算法通过pythonopencv网络模型算法框架设定了各种合规行为和违规行为的模型&#xff0c;安全生产作业现场违规行为识别算法检测到违规行为&#xff0c;将立即进行抓拍并发送告警信息给相关人员&#xff0c;以便及时采取相应的处置措施。OpenCV是一…

基于OV2640/ OV5640 的图像采集显示系统

基于OV2640/ OV5640 的图像采集显示系统系列文章目录&#xff1a; &#xff08;1&#xff09;基于 OV5640 摄像头理论知识讲解-成像和采样原理 &#xff08;2&#xff09;基于 OV5640 摄像头理论知识讲解-数字接口和控制接口 &#xff08;3&#xff09;基于 OV5640 摄像头理论知…

vscode+ros开发环境搭建

目录 介绍 前提 vscode安装 vscode插件安装 工作空间准备 打开vscode 创建catkin包 编写cpp代码 编译 运行 启动ros服务 监听话题 启动ros测试 介绍 ros开发是机器人开发中必不可少的工作&#xff0c;语言选择可以是c,也可以是python。工具的话&#xff0c;不能像wi…

ceph中PGLog处理流程

ceph的PGLog是由PG来维护&#xff0c;记录了该PG的所有操作&#xff0c;其作用类似于数据库里的undo log。PGLog通常只保存近千条的操作记录(默认是3000条&#xff0c; 由osd_min_pg_log_entries指定)&#xff0c;但是当PG处于降级状态时&#xff0c;就会保存更多的日志&#x…

React 生命周期

React的生命周期 一、什么是React的生命周期二、传统生命周期2.1、挂载&#xff08;Mounting&#xff09;2.2、更新&#xff08;Updating&#xff09;2.3、卸载&#xff08;Unmounting&#xff09;2.4、API2.4.1、render2.4.1.1、Updating 阶段&#xff0c;render调用完还有可能…

WPF基础入门-Class6-WPF通知更改

WPF基础入门 Class6-WPF通知 1、显示页面&#xff1a; <Grid><StackPanel><TextBox Text"{Binding Name}"></TextBox><TextBox Text"{Binding Title}"></TextBox><Button Command"{Binding ShowCommand}&qu…

初次跑yolo5遇到的一些问题

1. ImportError: cannot import name COMMON_SAFE_ASCII_CHARACTERS‘ from charset-normalizerconstant‘ 这个报错可能是由于charset_normalizer模块的版本问题引起的。尝试更新charset_normalizer模块到最新版本&#xff0c;或者使用较旧的版本&#xff0c;看看是否可以解…

用AI + Milvus Cloud搭建着装搭配推荐系统

在上一篇文章中,我们学习了如何利用人工智能技术(例如开源 AI 向量数据库 Milvus Cloud 和 Hugging Face 模型)寻找与自己穿搭风格相似的明星。在这篇文章中,我们将进一步介绍如何通过对上篇文章中的项目代码稍作修改,获得更详细和准确的结果,文末附赠彩蛋。 注:试用此…

Ansys Zemax | 手机镜头设计 - 第 2 部分:使用 OpticsBuilder 实现光机械封装

本文是3篇系列文章的一部分&#xff0c;该系列文章将讨论智能手机镜头模块设计的挑战&#xff0c;从概念、设计到制造和结构变形的分析。本文是三部分系列的第二部分。概括介绍了如何在 CAD 中编辑光学系统的光学元件以及如何在添加机械元件后使用 Zemax OpticsBuilder 分析系统…

Python切换输入法的实战代码

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

大模型开发05:PDF 翻译工具开发实战

大模型开发实战05:PDF 翻译工具开发实战 PDF-Translator 机器翻译是最广泛和基础的 NLP 任务 PDF-Translator PDF 翻译器是一个使用 AI 大模型技术将英文 PDF 书籍翻译成中文的工具。这个工具使用了大型语言模型 (LLMs),如 ChatGLM 和 OpenAI 的 GPT-3 以及 GPT-3.5 Turbo 来…

NewStarCTF 2022 web方向题解 wp

----------WEEK1---------- BUU NewStarCTF 公开赛赛道 WEEK1 [NotPHP] 先看题目&#xff0c;要传参加绕过。 分析一下代码&#xff1a;首先get一个datadata://test/plain,Wel…。然后key1和2用数组可以绕过。num2077a可以绕过弱类型。eval()中的php语句被#注释了&#xff0c…

成都智慧企业发展研究院总经理郑小华:践行双轮驱动,为能源电力数智化注入新活力丨数据猿专访...

大数据产业创新服务媒体 ——聚焦数据 改变商业 随着全球经济走向数字化&#xff0c;中国正处于这一浪潮的前沿&#xff0c;进行前所未有的技术与产业深度融合。政府在2023年2月印发的《数字中国建设整体布局规划》等政策下&#xff0c;明确展示了对数字经济的支持与鼓励&…

串口接收数据-控制LED灯

目标 通过串口接收数据&#xff0c;对数据分析&#xff0c;控制8个LED灯按照设定时间闪烁。 8个LED灯可以任意设计&#xff0c;是否闪烁。闪烁时间按ms计算&#xff0c;通过串口发送&#xff0c;可设置1~4,294,967,296ms&#xff0c;也就是4字节数据协议自拟&#xff0c;有数…

代码随想录笔记--链表篇

目录 1--虚拟头节点的使用 2--设计链表 3--反转链表 4--两两交换链表中的节点 5--快慢指针 5-1--删除链表倒数第N个节点 5-2--环形链表 5-3--环形链表II 1--虚拟头节点的使用 在链表相关题目中&#xff0c;常新定义一个虚拟头结点 dummynode 来指向原链表的头结点&…