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、最…

谈谈编程思想-抽象,状态,面向对象

前言 JavaScript的内容晚点更新&#xff0c;和大家聊一聊一些对于编程新手陌生或遥远&#xff0c;但对老程序员来说已经异常熟悉的东西 抽象 简单来说就是要求你能把一些事物进行分析&#xff0c;把它从“现实”的问题肢解成一个个“抽象”的行为&#xff0c;这个过程就是一次…

XML 现实案例:深入解析与应用

XML 现实案例:深入解析与应用 XML(可扩展标记语言)自1998年成为W3C推荐标准以来,一直是数据交换和存储的重要工具。它是一种用于标记电子文件的结构化语言,使得数据不仅人类可读,而且机器可处理。本文将探讨XML在现实世界中的应用案例,展示其如何在不同领域中发挥作用。…

实习冲刺Day19

算法题 平衡二叉树 平衡二叉树也叫AVL树&#xff0c;它或者是一颗空树&#xff0c;或者具有以下性质的二叉排序树&#xff1a;它的左子树和左子树的高度之差(平衡因子)的绝对值不超过1&#xff0c;且它的左子树和右子树都是一颗平衡二叉树。 它具有一个左子树和一个右子树&a…

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

一、实验目的 了解路由器的作用。掌握路由器的基本配置方法。掌握路由器模块的使用和互连方式。 二、实验环境 设备&#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;根据原始研究中定义的细胞标记重新注释各种免疫细胞…

CatBoost中的排序提升(Ordered Boosting)

排序提升&#xff08;Ordered Boosting&#xff09;是 CatBoost 的核心创新之一&#xff0c;用于解决梯度提升决策树&#xff08;GBDT&#xff09;在训练过程中可能产生的信息泄漏&#xff08;Information Leakage&#xff09;和预测偏移&#xff08;Prediction Shift&#xff…