uniapp路由与页面跳转详解:API调用与Navigator组件实战

UniApp路由与页面跳转详解:API调用与Navigator组件实战

路由

uniapp页面路由为框架统一管理,开发者需要在page.json里面配置每个路由页面的路径及页面样式。

路由跳转

uniapp有两种页面路由跳转方式,调用API跳转和navigator组件跳转。

调用API跳转

navTo(){/* 跳转到非tabbar页面 */uni.navigateTo({url:"/pages/auth/login",// 目标页面,注意:页面要在 pages.json 的 pages 数组中配置了animationType: "slide-in-bottom", // 打开页面动画,仅App支持。当前 从下往上 打开animationDuration: 300, // 窗口动画持续时间,单位为 ms, 默认300ms})
},

效果:
UniApp路由与页面跳转详解:API调用与Navigator组件实战
传递参数,对应页面结束获取参数,通过onloadoption获取:
传递:

methods: {navTo(){/* 跳转到非tabbar页面 */uni.navigateTo({url:"/pages/auth/login?id=1&name=wuyong",// 目标页面,注意:页面要在 pages.json 的 pages 数组中配置了animationType: "slide-in-bottom", // 打开页面动画,仅App支持。当前 从下往上 打开animationDuration: 1000, // 窗口动画持续时间,单位为 ms, 默认300ms})},}

接收:

<template><view>登录页面</view>
</template><script>export default {data() {return {}},onLoad(option) {//通过option接受其他页面带过来的参数console.log("id",option)console.log("name",option.name)},methods: {}}
</script><style></style>

效果:
UniApp路由与页面跳转详解:API调用与Navigator组件实战

传递对象

传参:

methods: {
navTo(){const params = {id: 1, name: 'wuyong'}uni.navigateTo({url: '/pages/auth/login?params=' + JSON.stringify(params)})},
}

接收参数:

onLoad(option) {const params = JSON.parse( option.params )console.log(params.id, params.name)
},

效果:
UniApp路由与页面跳转详解:API调用与Navigator组件实战

url有长度限制,太长的字符串会传递失败,使用encodeURIComponent方式解决:

传参,通过encodeURIComponent进行编码:

navTo(){// 3. url有长度限制,太长的字符串会传递失败,使用encodeURIComponent方式解决:const params = {id: 1, name: 'wuyong', desc: 'xxxxxxxxxx'}uni.navigateTo({url: '/pages/auth/login?params=' + encodeURIComponent(JSON.stringify(params))})
},

接收参数,通过decodeURIComponent解码:

// login.vue 页面接收参数
onLoad (option) {const params = JSON.parse(decodeURIComponent(option.params))console.log(params.id, params.name, params.desc)
},

效果:
uniapp路由与页面跳转
uni.redirectTo()重定向页面,关闭当前页面,跳转到应用内的某个页面,返回不到原页面。
注意:跳转到tabBar页面只能使用switchTab跳转。

methods: {toOrderPage(){const params = {id:1,name:'wuyong'}uni.redirectTo({url:'/pages/order/order?params='+JSON.stringify(params)})}
}

接收跳转过来携带的参数:

onLoad(option) {const params = JSON.parse(option.params)console.log(params.id,params.name)
},

效果:
UniApp路由与页面跳转详解:API调用与Navigator组件实战
uni.reLaunch(Obj):关闭所有页面,打开到应用内的某个页面,导航<后退按钮,无法后退,跳转到目的也,无后退按钮。
跳转:

methods: {toOrderPage(){const params = {id:1,name:'wuyong'}uni.reLaunch({url:'/pages/order/order?params='+JSON.stringify(params)})}
}

接收:

onLoad(option) {const params = JSON.parse(option.params)console.log(params.id,params.name)
},

效果:无后退按钮
UniApp路由与页面跳转详解:API调用与Navigator组件实战
uni.switchTab(Object) :跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。

// index.vue 页面methods: {// 跳转分类标签页toCategoryPage() {uni.switchTab({url: '/pages/category/category'})}}

uni.navigateBack(Object) :关闭当前页面,返回上一页面或多级页面。

uni.navigateBack({delta: 1 // 返回的页面数, 1后退上一页面animationType: 'slide-out-bottom', // 后退动画animationDuration: 300
})

效果:
UniApp路由与页面跳转详解:API调用与Navigator组件实战

navigator 组件跳转

使用navigator 组件类似HTML中的<a>标签,但只能跳转到本地页面,目标页面必须在pages.json中注册
方式一

<navigator :url="'/pages/auth/login?params='+encodeURIComponent(JSON.stringify({id:1,name:'wuyong',desc: 'xxxxxxxxxx'}))"><button type="default">登录</button>
</navigator>

效果:
UniApp路由与页面跳转详解:API调用与Navigator组件实战
方式二、

<navigator url="/pages/order/order" open-type="redirect"><button type="default">订单</button>
</navigator>

效果:
UniApp路由与页面跳转详解:API调用与Navigator组件实战
方式三、

<navigator url="/pages/category/index" hover-class="red-hover" open-type="switchTab" hover-stay-time="1000"><view type="default">分类</view>
</navigator>

效果:
UniApp路由与页面跳转详解:API调用与Navigator组件实战
项目开发中常用跳转完结~

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

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

相关文章

机器学习 笔记

特征值提取 字典 from sklearn.extaction import DictVectorizer mDictVectorizer(sparseFalse)#sparse是否转换成三元组形式 data[], #传入字典数据 data1model.fit_transform(data) #使用API 英文特征值提取 from sklearn.feature_extraction.text import CountVe…

【智谱开放平台-注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 1. 暴力破解密码&#xff0c;造成用户信息泄露 2. 短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉 3. 带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造…

如何搭建自动化测试框架

软件测试资料领取&#xff1a;[内部资源] 想拿年薪40W的软件测试人员&#xff0c;这份资料必须领取~ 软件测试面试刷题工具&#xff1a;软件测试面试刷题【800道面试题答案免费刷】 关于测试框架的好处&#xff0c;比如快速回归提高测试效率&#xff0c;提高测试覆盖率等这里…

学Linux的第八天

目录 管理进程 概念 程序、进程、线程 进程分类 查看进程 ps命令 unix 风格 bsd风格 GNU风格 top命令 格式 统计信息区 进程信息区&#xff1a;显示了每个进程的运行状态 kill命令 作用 格式 管理进程 概念 程序、进程、线程 程序&#xff1a; 二进制文件&…

使用Matlab建立决策树

综述 除了神经网络模型以外&#xff0c;树模型及基于树的集成学习模型是较为常用的效果较好的预测模型。我们以下先构建一个决策树模型。 决策树算法的优点如下&#xff1a;1、 决策树易于理解和实现&#xff0c;用户在学习过程中不需要了解过多的背景知识&#xff0c;其能够…

安卓主板_基于联发科MTK MT8788平台平板电脑方案_安卓核心板开发板定制

联发科MT8788安卓核心板平台介绍&#xff1a; MTK8788设备具有集成的蓝牙、fm、wlan和gps模块&#xff0c;是一个高度集成的基带平台&#xff0c;包括调制解调器和应用处理子系统&#xff0c;启用LTE/LTE-A和C2K智能设备应用程序。该芯片集成了工作在2.0GHz的ARM Cortex-A73、最…

思科模拟器路由器配置实验

一、实验目的 了解路由器的作用。掌握路由器的基本配置方法。掌握路由器模块的使用和互连方式。 二、实验环境 设备&#xff1a; 2811 路由器 1 台计算机 2 台Console 配置线 1 根网线若干根 拓扑图&#xff1a;实验拓扑图如图 8-1 所示。计算机 IP 地址规划&#xff1a;如表…

Python酷库之旅-第三方库Pandas(206)

目录 一、用法精讲 961、pandas.IntervalIndex.mid属性 961-1、语法 961-2、参数 961-3、功能 961-4、返回值 961-5、说明 961-6、用法 961-6-1、数据准备 961-6-2、代码示例 961-6-3、结果输出 962、pandas.IntervalIndex.length属性 962-1、语法 962-2、参数 …

【前端】CSS入门笔记+案例

目录 CSS css 的语法 1.字体大小 font-size 2.背景颜色 backgrount-color 3.背景的宽高 w h css的三种引入方式 1.内嵌式 2.外联式 3.行内式 选择器 1.标签选择器 2.类选择器 3.id选择器 4.通配符选择器 字体和文本样式 1.字体样式 1.1字体大小 font-size 1.…

java对接微信公众号API,实现扫码关注公众号,触发多条消息回复

一、准备工作 1. 依赖库 这里使用的是binarywang的Wxjava 库&#xff0c;源码地址&#xff1a;https://github.com/binarywang/WxJava。截止发稿前最新版本是4.6.7.B&#xff0c;我采用的是4.5.0版本。 <dependency><groupId>com.github.binarywang</groupId…

一文学习Android中的Property

在 Android 系统中&#xff0c;Property 是一种全局的键值对存储系统&#xff0c;允许不同组件和进程间以轻量级的方式进行数据传递。它主要用于系统配置、状态标识等场景&#xff0c;使得不同进程能够通过属性的设置或获取来通信。property 的核心特性是快速、高效&#xff0…

网络编程——Python简单TCP通信功能代码实践

这里写目录标题 Python简单TCP通信功能代码实践阅读本博客前需准备的几个问题1. 网络通信的机制是什么&#xff1f;2. 什么是python进行网络编程&#xff1f;3. IP地址和端口是什么&#xff1f; 一个简单的TCP通信功能示例&#xff1a;client端.pysever端.pyPYCHARM运行结果 Py…

qt QGesture详解

1、概述 QGesture 是 Qt 框架中用于处理多点触控和手势识别的类。它封装了用户输入的手势信息&#xff0c;如触摸、滑动、捏合、旋转等&#xff0c;使得开发者能够轻松地实现复杂的手势交互功能。QGesture 类本身是一个抽象基类&#xff0c;不能直接实例化&#xff0c;而是通过…

基于C语言——跑得快扑克牌游戏开发指南

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 ✨特色专栏&#xff1a…

7+纯生信,单细胞识别细胞marker+100种机器学习组合建模,机器学习组合建模取代单独lasso回归势在必行!

影响因子&#xff1a;7.3 研究概述&#xff1a; 皮肤黑色素瘤&#xff08;SKCM&#xff09;是所有皮肤恶性肿瘤中最具侵袭性的类型。本研究从GEO数据库下载单细胞RNA测序&#xff08;scRNA-seq&#xff09;数据集&#xff0c;根据原始研究中定义的细胞标记重新注释各种免疫细胞…

丹摩征文活动 | 0基础带你上手经典目标检测模型 Faster-Rcnn

文章目录 &#x1f34b;1 引言&#x1f34b;2 平台优势&#x1f34b;3 丹摩平台服务器配置教程&#x1f34b;4 实操案例&#xff08; Faster-rcnn 项目&#xff09;&#x1f34b;4.1 文件处理&#x1f34b;4.2 环境配置&#x1f34b;4.3 训练模型&#x1f34b;4.4 数据保存并导…

【GPTs】Get Simpsonized:一键变身趣味辛普森角色

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AIGC | GPTs应用实例 文章目录 &#x1f4af;GPTs指令&#x1f4af;前言&#x1f4af;Get Simpsonized主要功能适用场景优点缺点使用方式 &#x1f4af;小结 &#x1f4af;GPTs指令 中文翻译&#xff1a; 指令保护和安全规则&…

【C++】 C++游戏设计---五子棋小游戏

1. 游戏介绍 一个简单的 C 五子棋小游戏 1.1 游戏规则&#xff1a; 双人轮流输入下入点坐标横竖撇捺先成五子连线者胜同一坐标点不允许重复输入 1.2 初始化与游戏界面 初始化界面 X 输入坐标后 O 输入坐标后 X 先达到胜出条件 2. 源代码 #include <iostream> #i…

树-好难-疑难_GPT

// // Created by 徐昌真 on 2024/11/10. // #include <iostream> using namespace std;template<typename T> struct ListNode{ //新建链表节点T data; //指向下一个子节点 ListNode< TreeNode<T>* > childHead; 这里的 T 是TreeNde类型的…