探讨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.hqwc.cn/news/84620.html

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

相关文章

小研究 - J2EE 应用服务器的软件老化测试研究

软件老化现象是影响软件可靠性的重要因素&#xff0c;长期运行的软件系统存在软件老化现象&#xff0c;这将影响整个业务系统的正常运行&#xff0c;给企事业单位带来无可估量的经济损失。软件老化出现的主要原因是操作系统资源消耗殆尽&#xff0c;导致应用系统的性能下降甚至…

回归预测 | MATLAB实现PSO-RF粒子群优化算法优化随机森林算法多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现PSO-RF粒子群优化算法优化随机森林算法多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现PSO-RF粒子群优化算法优化随机森林算法多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09;效果…

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…

微信小程序路由以及跳转页面传递参数

路由 在app.json的pages里面写 "pages/页面/页面" 直接保存pages直接生成非常方便 跳转页面 wx.navigateTo() 保留当前页面&#xff0c;跳转到应用内的某个非tabBar页面。 <text bindtap"daka">点击</text> daka:function () {wx.navigateTo…

VR/AR/眼镜投屏充电方案(LDR6020)

VR眼镜即VR头显&#xff0c;也称虚拟现实头戴式显示设备&#xff0c;随着元宇宙概念的传播&#xff0c;VR眼镜的热度一直只增不减&#xff0c;但是头戴设备的续航一直被人诟病&#xff0c;如果增大电池就会让头显变得笨重影响体验&#xff0c;所以目前最佳的解决方案还是使用VR…

2023年高教社杯 国赛数学建模思路 - 案例:FPTree-频繁模式树算法

文章目录 算法介绍FP树表示法构建FP树实现代码 建模资料 ## 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 算法介绍 FP-Tree算法全称是FrequentPattern Tree算法&#xff0c;就是频繁模式树算法&#xff0c…

网站常见安全漏洞 | 青训营

Powered by:NEFU AB-IN 文章目录 网站常见安全漏洞 | 青训营 网站基本组成及漏洞定义服务端漏洞**SQL注入****命令执行****越权漏洞****SSRF****文件上传漏洞** 客户端漏洞**开放重定向****XSS****CSRF****点击劫持****CORS跨域配置错误****WebSocket** 网站常见安全漏洞 | 青训…

小区物业业主管理信息系统设计的设计与实现(论文+源码)_kaic

摘 要 随着互联网的发展&#xff0c;网络技术的发展变得极其重要&#xff0c;所以依靠计算机处理业务成为了一种社会普遍的现状。管理方式也自然而然的向着现代化技术方向而改变&#xff0c;所以纯人工管理方式在越来越完善的现代化管理技术的比较之下也就显得过于繁琐&#x…

【力扣】盛最多水的容器

目录 题目 题目初步解析 水桶效应 代码实现逻辑 第一步 第二步 第三步 代码具体实现 注意 添加容器元素的函数 计算迭代并且判断面积是否是最大值 总代码 运行结果 总结 题目 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是…

QT初始学习中的个人基础认知

整体感觉 安装的时候感觉更像python的库安装和编译器版本的配合安装。进入创建工程时&#xff0c;感觉是c语言的创建工程的感觉&#xff0c;而且可以看到main和h的头文件&#xff0c;整体来看是C来编写的程序。完成整个工程个人感觉是C编写功能&#xff0c;使用VB实现界面设计…

开发新能源的好处

风能无论是总装机容量还是新增装机容量&#xff0c;全球都保持着较快的发展速度&#xff0c;风能将迎来发展高峰。风电上网电价高于火电&#xff0c;期待价格理顺促进发展。生物质能有望在农业资源丰富的热带和亚热带普及&#xff0c;主要问题是降低制造成本&#xff0c;生物乙…

数据结构(Java实现)-二叉树(上)

树型结构 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的。 有一个特殊的结点&#xff0c;称为根结点&…