探讨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.mfbz.cn/a/91279.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

安装搭建私有仓库 Harbor

1&#xff0c;搭建Harbor时需要安装docker compose工具 wget https://storage.googleapis.com/harbor-releases/release- 1.7.0/harbor-offline-installer-v1.7.1.tgz在github下载Harbor最新版&#xff08;第一个&#xff09; 解压文件到 /usr/local tar xf harbor-offline-i…

Spring Boot多环境指定yml或者properties

Spring Boot多环境指定yml或者properties 文章目录 Spring Boot多环境指定yml或者properties加载顺序配置指定某个yml 加载顺序 ● application-local.properties ● application.properties ● application-local.yml ● application.yml application.propertes server.port…

Redis从基础到进阶篇(二)----内存模型与内存优化

目录 一、缓存通识 1.1 ⽆处不在的缓存 1.2 多级缓存 &#xff08;重点&#xff09; 二、Redis简介 2.1 什么是Redis 2.2 Redis的应用场景 三、Redis数据存储的细节 3.1 Redis数据类型 3.2 内存结构 3.3 内存分配器 3.4 redisObject 3.4.1 type 3.4.2 encoding 3…

[论文阅读笔记26]Tracking Everything Everywhere All at Once

论文地址: 论文 代码地址: 代码 这是一篇效果极好的像素级跟踪的文章, 发表在ICCV2023, 可以非常好的应对遮挡等情形, 其根本的方法在于将2D点投影到一个伪3D(quasi-3D)空间, 然后再映射回去, 就可以在其他帧中得到稳定跟踪. 这篇文章的方法不是很好理解, 代码也刚开源, 做一…

设计模式--单例模式(Singleton Pattern)

一、什么是单例模式 单例模式是一种创建型设计模式&#xff0c;它旨在确保一个类只有一个实例&#xff0c;并提供一个全局访问点来访问该实例。换句话说&#xff0c;单例模式限制了类的实例化次数为一个&#xff0c;并提供一种在应用程序中共享一个实例的方式。这对于需要只有…

一个简单的web应用程序的创建

一个简单的web应用程序的创建 1、数据库设计与创建1.1、数据库系统1.2、Navicat Premium1.3、Power Designer2、使用maven创建SpringBoot项目2.1、配置maven2.2、安装idea2.3、使用idea创建maven项目2.4、根据需要配置pom.xml文件、配置项目启动相关的文件2.5、写SpringBoot项目…

React入门 组件学习笔记

项目页面以组件形式层层搭起来&#xff0c;组件提高复用性&#xff0c;可维护性 目录 一、函数组件 二、类组件 三、 组件的事件绑定 四、获取事件对象 五、事件绑定传递额外参数 六、组件状态 初始化状态 读取状态 修改状态 七、组件-状态修改counter案例 八、this问…

Jmeter 接口测试总结

背景介绍 对于 Android 项目来说&#xff0c;使用的是 Java 开发&#xff0c;网络请求接口的数量庞大且复杂&#xff0c;测试人员无法很直观的判断、得出网络请求是否存在问题。另一方面&#xff0c;为了验证请求接口是否能够在大负荷条件下&#xff0c;长时间、稳定、正常的运…

3d max插件CG MAGIC中的蜂窝材质功能可提升效率吗?

工作中能提升效率也都是大家所想的&#xff0c;对于设计师的一个设计过程中&#xff0c;可能想怎么样可以更快呀&#xff0c;是哪个步骤慢了呢&#xff1f; 这样的结果只能说会很多&#xff0c;但是建模这个步骤&#xff0c;肯定是有多无少的。 为了让模型更加逼真&#xff0c…

探索AIGC人工智能(Midjourney篇)(二)

文章目录 利用Midjourney进行LOGO设计 用ChatGPT和Midjourney的AI绘画&#xff0c;制作儿童绘本故事 探索Midjourney换脸艺术 添加InsightFaceSwap机器人 Midjourney打造专属动漫头像 ChatGPT Midjourney画一幅水墨画 Midjourney包装设计之美 Midjourney24节气海报插画…

【电能质量扰动】基于ML和DWT的电能质量扰动分类方法研究(Matlab实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

APP爬虫之-Protobuf协议逆向解析

在做APP抓取时&#xff0c;会发现有的APP Response回来的数据有“加密”。不知道返回的内容是什么。 如下&#xff1a; 如上&#xff0c;内容不是明文的&#xff0c;没办法解析数据。APP常见的对数据加密有三种情况&#xff1a;第一种是&#xff0c;用诸如AES这类加密算法对数…

HodlSoftware-免费在线PDF工具箱 加解密PDF 集成隐私保护功能

HodlSoftware是什么 HodlSoftware是一款免费在线PDF工具箱&#xff0c;集合编辑 PDF 的简单功能&#xff0c;可以对PDF进行加解密、优化压缩PDF、PDF 合并、PDF旋转、PDF页面移除和分割PDF等操作&#xff0c;而且工具集成隐私保护功能&#xff0c;文件只在浏览器本地完成&…

vs2019 ,c++的STD库全局函数 _Pocma 的思考

&#xff08;1&#xff09;在阅读vs2019上的 STL库的 map 源码时&#xff0c;遇到了这个函数&#xff0c;之前&#xff0c;在别的源码中也经常出现这个函数。那么这个函数起什么作用呢&#xff1f; 在1880行&#xff0c;有对该函数的调用。其定义如下图&#xff1a;&#xff0…

Jetbrains IDE新UI设置前进/后退导航键

背景 2023年6月&#xff0c;Jetbrains在新发布的IDE&#xff08;Idea、PyCharm等&#xff09;中开放了新UI选项&#xff0c;我们勾选后重启IDE&#xff0c;便可以使用这一魔性的UI界面了。 但是前进/后退这对常用的导航键却找不到了&#xff0c;以前的设置方式&#xff08;Vi…

Java10(异常处理)

0.复习面向对象 1.异常的体系结构 异常&#xff1a;在Java语言中&#xff0c;将程序执行中发生的不正常情况.(开发中的语法错误和逻辑错误不是异常) 异常事件分两类&#xff08;它们上一级为java.lang.Throwable&#xff09;&#xff1a; Error Java虚拟机无法解决的严重问…

使用kubeadm方式快速部署一个K8S集群

目录 一、环境准备 二、环境初始化 三、在所有主机上安装相关软件 1、安装docker 2、配置k8s的yum源 3、安装kubelet、kubeadm、kubectl 四、部署Kubernetes Master 五、加入Kubernets Node 六、部署CNI网络插件 七、测试k8s集群 一、环境准备 我的是CentOS7系统&am…

【Linux】socket 编程基础

文章目录 &#x1f4d5; 网络间的通信&#x1f4d5; socket 是什么1. socket 套接字2. 套接字描述符3. 基本的 socket 接口函数3.1 头文件3.2 socket() 函数3.3 bind() 函数struct sockaddr主机序列与网络序列 3.4 listen() 函数3.5 connect() 函数3.6 accept() 函数IP 地址风格…

C# Winfrom通过COM接口访问和控制Excel应用程序,将Excel数据导入DataGridView

1.首先要创建xlsx文件 2.在Com中添加引用 3. 添加命名空间 using ApExcel Microsoft.Office.Interop.Excel; --这样起个名字方面后面写 4.样例 //点击操作excelDataTable dt new DataTable();string fileName "D:\desktop\tmp\test.xlsx";ApExcel.Application exA…

04.sqlite3学习——DDL(数据定义:创建和删除表)

目录 DDL&#xff08;数据定义&#xff1a;创建和删除表&#xff09; SQLite 创建表 语法 实例 字段修饰符 primary key 定义主键列 AUTOINCREMENT 自动增长 UNIQUE 字段的值唯一 NOT NULL 字段的值不为空 SQLite 修改表 增加字段add 修改表名rename to SQLite 删…