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

news2024/11/16 13:34:32

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.coloradmin.cn/o/930699.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Activity之间的数据传递方法汇总

在Activity间传递的数据一般比较简单&#xff0c;但是有时候实际开发中也会传一些比较复杂的数据&#xff0c;本节一起来学习更多Activity间数据的传递方法。 1、通过 Intent 传递 我们在进行 Activity 跳转时&#xff0c;是要有 Intent&#xff0c;此时 Intent 是可以携带数…

Ai.Fy - Text To Image——AIGC工具

Ai.Fy 是一个功能强大的 Unity 编辑器扩展,可将文本转换为图像、粗略草图转换为纹理、AI 深度图、概念设计、生成自动法线贴图和平滑贴图。 以下是生成的案例 无需注册,无需API密钥,无需定期付款,无订阅费,无额外费用,无限制,只需单击即可在我们的模型上进行易于使用的…

action和mutation之间的利用 代码解释

场景&#xff1a;购物车点击按钮 context.commit(‘changeCount’, { goodsNum, goodsId })解释这段代码 这段代码是在使用 Vuex 进行状态管理时常见的一种写法。下面对代码进行解释&#xff1a; context.commit 是 Vuex 中的一个方法&#xff0c;用于触发一个名为 changeC…

iconfont 图标在vue里的使用

刚好项目需要使用一个iconfont的图标&#xff0c;所以记录一下这个过程 1、iconfont-阿里巴巴矢量图标库 这个注册一个账号&#xff0c;以便后续使用下载代码时需要 2、寻找自己需要的图标 我主要是找两个图标 &#xff0c;一个加号&#xff0c;一个减号&#xff0c;分别加入到…

Python“牵手”阿里巴巴商品列表数据,关键词搜索阿里巴巴API接口数据,阿里巴巴API接口申请指南

阿里巴巴平台API接口是为开发电商类应用程序而设计的一套完整的、跨浏览器、跨平台的接口规范&#xff0c;阿里巴巴API接口是指通过编程的方式&#xff0c;让开发者能够通过HTTP协议直接访问阿里巴巴平台的数据&#xff0c;包括商品信息、店铺信息、物流信息等&#xff0c;从而…

【AutoLayout案例05-横竖屏效果 Objective-C语言】

一、接下来,看看这个 我们一看这个效果,就知道需求了吧 需求是,无论在横屏、竖屏下: 1)首先,是不是有四个View啊 无论在横屏、竖屏、下,都有这么四个View吧 这四个View的高和宽,是什么, 相等的吧 这四个View的高和宽,是相等的 那么,既然这四个View的高和宽,是…

Webgis系统调试与发布

Webgis系统调试与发布 调试方法与技巧网站发布方法 调试方法与技巧 在Web开发中&#xff0c;程序调试方法与技巧是开发人员必须掌握的一个重要内容&#xff0c;非常关键。Leaflet开发其实就是HTMLJavaScript的Web开发&#xff0c;其调试方法与一般的Web开发相同。 Web开发调试…

基于JSP+Servlet+Mysql停车场管理系统(含实训报告)

TOC 一、系统介绍 项目类型&#xff1a;Java web项目 项目名称&#xff1a;基于JSPServlet的停车场管理系统 项目架构&#xff1a;B/S架构 开发语言&#xff1a;Java语言 前端技术&#xff1a;HTML、CSS、JS、JQuery等技术 后端技术&#xff1a;JSP、Servlet、JDBC等技术…

Node.js+Vue家政服务保洁预约系统_ee587

各功能模块的设计也便于以后的系统升级和维护。该系统采用了软件组件化、精化体系结构、分离逻辑和数据等方法。首先&#xff0c;要掌握有关系统的基本理论&#xff0c;如 nodejs技术、 MySQL数据库等&#xff0c;并对其进行全面的分析。为了给系统打下坚实的技术基础&#xff…

硬核旗舰南卡OE CC开放式耳机发布,重新定义百元开放式耳机新标杆!

​随着现在健康意识的不断提高&#xff0c;人们对于日常用品的要求越来越高&#xff0c;在耳机市场中&#xff0c;健康因素也逐渐成为消费者所考虑的因素之一&#xff0c;入耳式耳机因为会引发中耳炎、耳膜炎等疾病&#xff0c;正在逐渐被开放式蓝牙耳机所取代&#xff0c;南卡…

C语言实例_文件内容加密与解密

一、加密解码功能介绍 1.1 加密解码的功能 文件内容需要加密与解密功能的原因主要有两个方面&#xff1a;保护数据安全和确保数据完整性。 &#xff08;1&#xff09;保护数据安全&#xff1a;加密可以将文件内容转化为不可读或难以理解的形式&#xff0c;防止未经授权的人员…

Redis7之介绍(一)

1. 是什么 Redis:REmote Dictionary Server(远程字典服务器&#xff09; Remote Dictionary Server( 远程字典服务)是完全开源的&#xff0c;使用ANSIC语言编写遵守BSD协议&#xff0c;是一个高性能的Key-Value数据库提供了丰富的数据结构&#xff0c;例如String、Hash、List、…

Leetcode76. 最小覆盖子串

给你一个字符串 s 、一个字符串 t 。返回 s 中涵盖 t 所有字符的最小子串。如果 s 中不存在涵盖 t 所有字符的子串&#xff0c;则返回空字符串 "" 。 注意&#xff1a; 对于 t 中重复字符&#xff0c;我们寻找的子字符串中该字符数量必须不少于 t 中该字符数量。如果…

亲测influxdb安装为window后台服务

InfluxDB 安装 64bit&#xff1a;https://dl.influxdata.com/influxdb/releases/influxdb-1.7.4_windows_amd64.zip 解压安装包 修改配置文件 [meta]# Where the metadata/raft database is storeddir "D:/influxdb/meta"...[data]# The directory where the TSM…

无涯教程-进程 - 信号(Signals)

信号是对进程的通知&#xff0c;指示事件的发生。信号也称为软件中断&#xff0c;无法预知其发生&#xff0c;因此也称为异步事件。 可以用数字或名称指定信号&#xff0c;通常信号名称以SIG开头。可用信号kill –l(列出信号名称为l)检查可用信号&#xff0c;如下所示- 无论何…

【Qt学习】05:自定义封装界面类

OVERVIEW 自定义封装界面类1.QListWidget2.QTreeWidget3.QTableWidget4.StackedWidget5.Others6.自定义封装界面类-显示效果&#xff08;1&#xff09;添加设计师界面类&#xff08;2&#xff09;在ui中设计自定义界面&#xff08;3&#xff09;在需要使用的界面中添加&#xf…

ModaHub魔搭社区:经营大脑经营沙盘

目录 WinPlan经营大脑经营沙盘介绍 WinPlan经营大脑经营沙盘展示 WinPlan经营大脑经营沙盘设计器 WinPlan经营大脑经营沙盘介绍 经营沙盘是面向企业管理层,展示企业经营状况。可基于不同场景创建不同沙盘,用于分析不同的数据,包括销售数据、财务数据等。 企业经营决策系…

吉客云与金蝶云星空对接集成分页查询出库单打通分布式调出单新增

吉客云与金蝶云星空对接集成分页查询出库单打通分布式调出单新增 接通系统&#xff1a;吉客云 “吉客云”是一站式企业数字化解决方案系统&#xff0c;可实现业务、财务、办公、人事等一体化管理。相对于传统多套软件系统的集成方案&#xff0c;“吉客云”具有业务流程更流畅&a…

《Python基础教程》专栏总结篇

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