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

news2024/11/24 1:55:29

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.coloradmin.cn/o/2239441.html

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

相关文章

35.Redis 7.0简介

2022 年 2 月初&#xff0c;Redis 7.0 迎来了首个候选发布&#xff08;RC&#xff09;版本。这款内存键值数据库迎来了“重大的性能优化”和其它功能改进&#xff0c;性能优化包括降低写入时复制内存的开销、提升内存效率&#xff0c;改进 fsync 来避免大量的磁盘写入和优化延迟…

MySQL技巧之跨服务器数据查询:基础篇-如何获取查询语句中的参数

MySQL技巧之跨服务器数据查询&#xff1a;基础篇-如何获取查询语句中的参数 上一篇已经描述&#xff1a;借用微软的SQL Server ODBC 即可实现MySQL跨服务器间的数据查询。 而且还介绍了如何获得一个在MS SQL Server 可以连接指定实例的MySQL数据库的连接名: MY_ODBC_MYSQL 以…

连续15年霸榜“双11”行业第一,九牧做对了什么?

文 | 螳螂观察&#xff08;TanglangFin&#xff09; 作者 | 余一 随着“双十一”的落幕&#xff0c;各类销售榜单再次成为热门话题。 天猫“双11”全周期589个品牌成交额破亿&#xff0c;其中苹果、海尔、美的、小米、九牧等45个品牌成交额突破10亿。 值得注意的是在绝大多…

【网页设计】HTML5 和 CSS3 提高

目标 能够说出 3~5 个 HTML5 新增布局和表单标签能够说出 CSS3 的新增特性有哪些 1. HTML5 的新特性 注&#xff1a;该部分所有内容可参考菜鸟教程菜鸟教程 - 学的不仅是技术&#xff0c;更是梦想&#xff01; (runoob.com) HTML5 的新增特性主要是针对于以前的不足&#xf…

Linux手动安装nginx

本次以安装nginx-1.12.2为例 1、首先说明一下,安装nginx之前需要安装如下素材: 2、开始安装 第一步,安装依赖yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel第二步,下载并安装nginx安装包(nginx官网:http://nginx.org/)# 下载 wget http://nginx…

基于springboot+vue实现的大型超市数据处理系统 (源码+L文+ppt)4-015

第4章 系统设计 本章主要讲述的是大型超市数据处理系统的设计开发结构&#xff0c;简单介绍了开发流程与数据库设计的原则以及数据表的关系结构图&#xff0c;并且详细的展示了数据表的内部结构信息与属性。 图4-2 大型超市数据处理系统总体结构图 4.4 数据表信息&#xff…

游戏引擎学习第七天

视频参考:https://www.bilibili.com/video/BV1QFmhYcE69 ERROR_DEVICE_NOT_CONNECTED 是一个错误代码&#xff0c;通常在调用 XInputGetState 或 XInputSetState 函数时返回&#xff0c;表示指定的设备未连接。通常会出现以下几种情况&#xff1a; 未连接控制器&#xff1a;如…

IEC60870-5-104 协议源码架构详细分析

IEC60870-5-104 协议源码架构 前言一、资源三、目录层级一二、目录层级二config/lib60870_config.hdependencies/READMEexamplesCMakeLists.txtcs101_master_balancedcs104_client_asyncmulti_client_servertls_clienttls_server说明 make这些文件的作用是否需要导入这些文件&a…

全面介绍软件安全测试分类,安全测试方法、安全防护技术、安全测试流程

一、软件系统设计开发运行安全 1、注重OpenSource组件安全检查和版本更新&#xff08;black duck&#xff09; 现在很多云、云服务器都是由开源的组件去搭成的&#xff0c;对于OpenSource组件应该去做一些安全检查和版本更新&#xff0c;尤其是版本管理&#xff0c;定期对在运…

Cent OS-7的Apache服务配置

WWW是什么&#xff1f; WWW&#xff08;World Wide Web&#xff0c;万维网&#xff09;是一个全球性的信息空间&#xff0c;其中的文档和其他资源通过URL标识&#xff0c;并通过HTTP或其他协议访问。万维网是互联网的一个重要组成部分&#xff0c;但它并不是互联网的全部。互联…

遗传算法与深度学习实战(23)——利用遗传算法优化深度学习模型

遗传算法与深度学习实战&#xff08;23&#xff09;——利用遗传算法优化深度学习模型 0. 前言1. 神经进化2. 使用遗传算法作为深度学习优化器小结系列链接 0. 前言 神经进化涵盖了所有用于改进深度学习的进化算法。更具体地说&#xff0c;神经进化用来定义应用于深度学习的特…

Kubernetes 核心组件调度器(Scheduler)

文章目录 一&#xff0c;调度约束1.Kubernetes的基本构建块和最小可调度单元pod创建过程&#xff08;工作机制&#xff0c;重点&#xff09;1.1list-watch 组件List-Watch 的优点List-Watch 的应用场景List-Watch 的挑战与优化 2.调度过程(重点)2.1调度过程&#xff1a;2.2Kube…

STM32WB55RG开发(3)----生成 BLE 程序连接手机APP

STM32WB55RG开发----3.生成 BLE 程序连接手机APP 概述硬件准备视频教学样品申请源码下载参考程序选择芯片型号配置时钟源配置时钟树RTC时钟配置RF wakeup时钟配置查看开启STM32_WPAN条件配置HSEM配置IPCC配置RTC启动RF开启蓝牙设置工程信息工程文件设置结果演示 概述 本项目旨…

[C++]内联函数和nullptr

> &#x1f343; 本系列为初阶C的内容&#xff0c;如果感兴趣&#xff0c;欢迎订阅&#x1f6a9; > &#x1f38a;个人主页:[小编的个人主页])小编的个人主页 > &#x1f380; &#x1f389;欢迎大家点赞&#x1f44d;收藏⭐文章 > ✌️ &#x1f91e; &#x1…

微软OmniParser:一切皆文档,OCR驱动智能操作

前沿科技速递&#x1f680; 微软推出的OmniParser是一种创新的框架&#xff0c;旨在将手机和电脑屏幕视为文档&#xff0c;通过OCR技术与多模态大模型实现对用户界面的深度理解和操作。OmniParser能够高效识别和提取界面中的文本信息、位置和语义&#xff0c;助力自动化操作。 …

使用 Web Search 插件扩展 GitHub Copilot 问答

GitHub Copilot 是一个由 GitHub 和 OpenAI 合作开发的人工智能代码提示工具。它可以根据上下文提示代码&#xff0c;还可以回答各种技术相关的问题。但是 Copilot 本身不能回答非技术类型的问题。为了扩展 Copilot 的功能&#xff0c;微软发布了一个名为 Web Search 的插件&am…

Rust语言在系统编程中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 Rust语言在系统编程中的应用 Rust语言在系统编程中的应用 Rust语言在系统编程中的应用 引言 Rust 概述 定义与原理 发展历程 Ru…

vue+vite前端项目ci过程中遇到的问题

将项目进行ci流水线构建时&#xff0c;遇到了npm run build 构建完成后命令行不会终止的问题&#xff0c;导致了无法进行下一个步骤。如下图&#xff1a; 排查了好久找到事vite.config.js的配置出了问题&#xff0c;如图所示&#xff0c;将build下的watch改为false即可解决问…

Python 获取PDF的各种页面信息(页数、页面尺寸、旋转角度、页面方向等)

目录 安装所需库 Python获取PDF页数 Python获取PDF页面尺寸 Python获取PDF页面旋转角度 Python获取PDF页面方向 Python获取PDF页面标签 Python获取PDF页面边框信息 了解PDF页面信息对于有效处理、编辑和管理PDF文件至关重要。PDF文件通常包含多个页面&#xff0c;每个页…

企业级RAG(检索增强生成)系统构建研究

— 摘要 检索增强生成&#xff08;Retrieval-Augmented Generation&#xff0c;RAG&#xff09;技术已经成为企业在知识管理、信息检索和智能问答等应用中的重要手段。本文将从RAG系统的现状、方法论、实践案例、成本分析、实施挑战及应对策略等方面&#xff0c;探讨企业如何…