uniapp中页面跳转及encodeURIComponent转码的使用详解

server/2025/3/3 2:53:11/

文章目录

  • 一、uniapp页面跳转方法汇总
    • 1. uni.navigateTo
    • 2. uni.redirectTo
    • 3. uni.reLaunch
    • 4. uni.switchTab
    • 5. uni.navigateBack
  • 二、encodeURIComponent转码的使用场景
    • 1. 参数中有特殊字符时
    • 2. 参数值可能变化时

一、uniapp页面跳转方法汇总

1. uni.navigateTo

保留当前页面,跳转到应用内的某个页面。使用示例如下:

uni.navigateTo({url: '/pages/detail/detail?id=1&name=测试'
});

通过这种方式跳转后,用户可以点击左上角的返回按钮回到上一页。适用于需要在多个页面间灵活切换,且保留当前页面状态的场景,比如从商品列表页跳转到商品详情页。

2. uni.redirectTo

关闭当前页面,跳转到应用内的某个页面。

uni.redirectTo({url: '/pages/login/login'
});

这种跳转方式会销毁当前页面,常用于登录成功后,从登录页面跳转到首页,避免用户通过返回按钮又回到登录前的状态。

3. uni.reLaunch

关闭所有页面,打开到应用内的某个页面。

uni.reLaunch({url: '/pages/home/home'
});

一般在应用的一些关键流程节点使用,比如用户注销登录后,直接回到应用首页,清除之前所有的页面栈。

4. uni.switchTab

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。

uni.switchTab({url: '/pages/tabbar/home/home'
});

适用于在底部导航栏的不同页面间切换,比如从个人中心页面切换到首页。

5. uni.navigateBack

关闭当前页面,返回上一页面或多级页面。可通过delta参数指定返回的页面数。

// 返回上一页
uni.navigateBack();
// 返回上三级页面
uni.navigateBack({delta: 3
});

二、encodeURIComponent转码的使用场景

不管是哪种页面跳转方法,只要涉及到页面间传参,就可能用到encodeURIComponent转码。

1. 参数中有特殊字符时

当传递的参数包含特殊字符,像中文、&=?等,就容易出现问题。以uni.navigateTo为例:

let desc = '这是一个包含&符号的描述';
uni.navigateTo({url: '/pages/detail/detail?desc=' + desc
});

在目标页面获取的desc参数可能并非预期内容,因为&在URL中有特殊用途,会导致参数解析错误。此时,需要用encodeURIComponent进行转码:

let desc = '这是一个包含&符号的描述';
let content = encodeURIComponent(desc);
uni.navigateTo({url: '/pages/detail/detail?desc=' + content 
});

在目标页面获取参数后,再用decodeURIComponent解码:

onLoad: function(options) {let content = decodeURIComponent(options.desc);console.log(content);
}

2. 参数值可能变化时

即便当前参数不包含特殊字符,但如果参数值未来可能发生变化并包含特殊字符,为防患于未然,也建议提前转码。

总之,在uniapp页面跳转传参时,只要参数有包含特殊字符的可能性,就应使用encodeURIComponent进行转码,确保参数准确无误地传递和解析,让应用的页面跳转和数据交互更加稳定可靠。


http://www.ppmy.cn/server/171960.html

相关文章

DeepSeek R1 + 飞书机器人实现AI智能助手

效果 TFChat项目地址 https://github.com/fish2018/TFChat 腾讯大模型知识引擎用的是DeepSeek R1,项目为sanic和redis实现,利用httpx异步处理流式响应,同时使用buffer来避免频繁调用飞书接口更新卡片的网络耗时。为了进一步减少网络IO消耗&…

Python正则

1.正则表达式 1.1含义:记录文本规则的代码,字符串处理工具 注意:需要导入re模块 1.2特点: 1.语法比较负杂,可读性较差 2.通用性很强,适用于多种编程语言 1.3步骤: 1.导入re模块 import…

docker创建nginx

docker run -d -p 8080:80 --name my-nginx-container nginx docker:命令 run:命令 -d:在后台运行容器 -p:8080:80:将容器内部的80端口映射到宿主机的8080端口。 --name my-nginx-container:为容器指定一个…

Spring MVC 的执行流程

Spring MVC 是一个基于 Java 的请求驱动型 Web 框架,其核心设计围绕 前端控制器模式,通过 DispatcherServlet 协调各个组件处理 HTTP 请求。以下是其完整的执行流程,共分为 8 个核心步骤: 1. HTTP请求到达DispatcherServlet 入口…

Kafka 赋能高效消息队列管理:从原理到实战

Kafka 赋能高效消息队列管理:从原理到实战 作者:Echo_Wish 引言:为什么选择 Kafka? 在现代分布式系统中,消息队列已经成为微服务架构、实时数据处理、日志采集等场景的基石。而 Apache Kafka 以其高吞吐、低延迟、分布式存储的特性,成为众多大厂的首选。 那么,Kafka 究…

ES scroll=1m:表示快照的有效时间为1分钟。怎么理解

在Elasticsearch中,scroll1m 表示你创建的 scroll 上下文 的有效时间为 1分钟。这个参数控制了你可以在多长时间内继续使用这个 scroll_id 来获取更多的数据。 什么是 Scroll 上下文? 当你使用 scroll API 时,Elasticsearch 会为你的查询创…

【Python爬虫(84)】当强化学习邂逅Python爬虫:解锁高效抓取新姿势

【Python爬虫】专栏简介:本专栏是 Python 爬虫领域的集大成之作,共 100 章节。从 Python 基础语法、爬虫入门知识讲起,深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑,覆盖网页、图片、音频等各类数据爬取,还涉及数据处理与分析。无论是新手小白还是进阶开发…

Flutter 学习之旅 之 flutter 使用 fluttertoast 的 toast 实现简单的 Toast 效果

Flutter 学习之旅 之 flutter 使用 fluttertoast 的 toast 实现简单的 Toast 效果 目录 Flutter 学习之旅 之 flutter 使用 fluttertoast 的 toast 实现简单的 Toast 效果 一、简单介绍 二、简单介绍 futtertoast 三、安装 fluttertoast 四、简单案例实现 五、关键脚本 一…