当前位置: 首页 > news >正文

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有两种页面路由跳转模式&#xff0c;即使用navigator组件跳转和调用API跳转&#xff0c;API调转不要理解为调用后台接口的API&#xff0c;而是指脚本函数中使用跳转函数。 一、组件路由跳转 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&#xff1a;SQL注入漏洞利用教程案例2&#xff1a;跨站脚本&#xff…...

PHP访问NetSuite REST Web Services

“同等看待欢乐和痛苦、得到和失去、胜利和失败、投入战斗。以此方式履行职责&#xff0c;你就不会招致任何罪恶。” -Bhagavad Gita 为了帮助PHP开发者快速起步&#xff0c;以REST Web Services方式打通与NetSuite的接口&#xff0c;我们答应给一个样例。但是我是不懂PHP的&a…...

【编译】多图解释 什么是短语、直接短语、句柄、素短语、可归约串

一、什么是短语二、什么是“直接”短语&#xff1f;三、什么是句柄&#xff1f;四、什么是素短语&#xff1f;五、什么是最左素短语可归约串就是“最左素短语” 首先&#xff0c;这些概念 都是相对于【句型】的&#xff0c;都是相对于【句型】的&#xff0c;都是相对于【句型】…...

React中事件绑定和Vue有什么区别?

1. 绑定方式 React&#xff1a;使用jsx语法&#xff0c;通过属性绑定事件。Vue&#xff1a;使用指令&#xff08;如v-on&#xff09;在模板中直接绑定事件。 2. 事件处理 React&#xff1a;通过合成事件系统封装原生事件&#xff0c;提供统一的API。Vue&#xff1a;直接使用…...

【DBA攻坚指南:左右Oracle,右手MySQL-学习总结】

处理log file sync等待事件 首先明确什么是log file sync等待事件 从用户提交会话开始&#xff0c;LGWR进程将redo缓存中的信息写入redo日志文件后&#xff0c;LGWR进程通知用户写操作完成&#xff0c;到用户会话接受到LGWR进程通知为止&#xff0c;这整个过程就是可能出现lo…...

C++中的内联函数

在C中&#xff0c;内联函数是一种特殊的函数。 定义 内联函数是在函数定义前加上关键字“inline”的函数。编译器在处理对内联函数的调用时&#xff0c;会尝试将函数体的代码直接插入到函数调用处&#xff0c;而不是像普通函数调用那样&#xff0c;进行跳转指令执行函数体代码…...

ssh.service could not be found“

如果你收到 “ssh.service could not be found” 错误&#xff0c;说明目标主机上没有安装 SSH 服务&#xff0c;或者安装的 SSH 服务的名称不为 ssh。这里有一些解决步骤&#xff1a; 1. 检查 SSH 服务是否已安装 在目标主机上执行以下命令来检查是否安装了 SSH 服务&#x…...

tensorflow有哪些具体影响,和chatgpt有什么关系

### TensorFlow的影响 **1. 深度学习框架的领军者** - **广泛使用**: TensorFlow是由Google开发的开源深度学习框架&#xff0c;广泛应用于各种机器学习任务&#xff0c;包括图像识别、自然语言处理、语音识别等。它是深度学习领域中最受欢迎的框架之一。 - **大规模生产环境*…...

Android OpenGL ES详解——几何着色器

目录 一、概念 1、图元 2、几何着色器 1、输入类型 2、输出类型 3、输出顶点数量最大值限制 二、使用几何着色器 三、应用举例——造几个房子 四、应用举例——爆破物体 1、获取法向量 2、显示法线 五、应用举例——细分三角形 六、应用举例——广告牌技术 一、概…...

Java学生管理系统(GUI和数据库)

Java学生管理系统&#xff08;GUI和数据库&#xff09; 本文简介 本资源演示了一个用Java实现的学生管理系统&#xff0c;结合了图形用户界面&#xff08;GUI&#xff09;和数据库操作。系统实现了学生、课程和账号三张表的管理功能&#xff0c;包括增删改查等操作。通过本资…...

035_Progress_Dialog_in_Matlab中的进度条对话框

进度条 概念 在使用Matlab开发界面时&#xff0c;有一个很好用的工具就是进度条。在计算过程中&#xff0c;为用户提供计算进度的反馈是改善用户体验的重要手段。 一项进行的计算任务&#xff0c;如果其总体进度是比较容易量化&#xff0c;则可以按照0%~100%的方式&#xff0…...

【GPTs】Ai-Ming:AI命理助手,个人运势与未来发展剖析

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AIGC | GPTs应用实例 文章目录 &#x1f4af;GPTs指令&#x1f4af;前言&#x1f4af;Ai-Ming主要功能适用场景优点缺点 &#x1f4af;小结 &#x1f4af;GPTs指令 中文翻译&#xff1a; defcomplete_sexagenary&#xff08;年&a…...

如何利用SAP低代码平台快速构建企业级应用?

SAP作为全球领先的企业管理软件解决方案提供商&#xff0c;一直致力于为企业提供全面且高效的业务管理工具。随着技术的快速发展&#xff0c;传统的开发方式已经无法满足企业在快速变化的市场环境下的需求。低代码开发平台应运而生&#xff0c;它通过简化应用程序的创建过程&am…...

Redis设计与实现 学习笔记 第十七章 集群

Redis集群是Redis提供的分布式数据库方案&#xff0c;集群通过分片&#xff08;sharding&#xff0c;水平切分&#xff09;来进行数据共享&#xff0c;并提供复制和故障转移功能。 17.1 节点 一个Redis集群通常由多个节点&#xff08;node&#xff09;组成&#xff0c;在刚开…...

多端校园圈子论坛小程序,多个学校同时代理,校园小程序分展示后台管理源码

社团活动与组织 信息发布&#xff1a;系统支持社团发布活动信息、招募新成员等&#xff0c;方便社团进行线上线下活动的组织和管理。 增强凝聚力&#xff1a;通过系统&#xff0c;社团成员可以更好地交流和互动&#xff0c;增强社团的凝聚力和影响力。 生活服务功能 二手市场…...

鸿蒙核心技术理念

文章目录 1)一次开发,多端部署2)可分可合,自由流转3)统一生态,原生智能1)一次开发,多端部署 “一次开发,多端部署”指的是一个工程,一次开发上架,多端按需部署。目的是支撑开发者高效地开发多种终端设备上的应用 2)可分可合,自由流转 元服务是鸿蒙系统提供的一…...

8. 基于 Redis 实现限流

在高并发的分布式系统中&#xff0c;限流是保证服务稳定性的重要手段之一。通过限流机制&#xff0c;可以控制系统处理请求的频率&#xff0c;避免因瞬时流量过大导致系统崩溃。Redis 是一种高效的缓存数据库&#xff0c;具备丰富的数据结构和原子操作&#xff0c;适合用来实现…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

Python训练营-Day26-函数专题1:函数定义与参数

题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一个名为 calculate_circle_area 的函数&#xff0c;该函数接收圆的半径 radius 作为参数&#xff0c;并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求&#xff1a;函数接收一个位置参数 radi…...

快速排序算法改进:随机快排-荷兰国旗划分详解

随机快速排序-荷兰国旗划分算法详解 一、基础知识回顾1.1 快速排序简介1.2 荷兰国旗问题 二、随机快排 - 荷兰国旗划分原理2.1 随机化枢轴选择2.2 荷兰国旗划分过程2.3 结合随机快排与荷兰国旗划分 三、代码实现3.1 Python实现3.2 Java实现3.3 C实现 四、性能分析4.1 时间复杂度…...

鸿蒙HarmonyOS 5军旗小游戏实现指南

1. 项目概述 本军旗小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;采用DevEco Studio实现&#xff0c;包含完整的游戏逻辑和UI界面。 2. 项目结构 /src/main/java/com/example/militarychess/├── MainAbilitySlice.java // 主界面├── GameView.java // 游戏核…...

云原生安全实战:API网关Envoy的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关 作为微服务架构的统一入口&#xff0c;负责路由转发、安全控制、流量管理等核心功能。 2. Envoy 由Lyft开源的高性能云原生…...

深度解析:etcd 在 Milvus 向量数据库中的关键作用

目录 &#x1f680; 深度解析&#xff1a;etcd 在 Milvus 向量数据库中的关键作用 &#x1f4a1; 什么是 etcd&#xff1f; &#x1f9e0; Milvus 架构简介 &#x1f4e6; etcd 在 Milvus 中的核心作用 &#x1f527; 实际工作流程示意 ⚠️ 如果 etcd 出现问题会怎样&am…...