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

在 UniApp 中获取当前页面地址

在 UniApp 中获取当前页面地址,可以通过以下步骤实现:

方法说明:

  1. 获取当前页面实例:使用 getCurrentPages() 获取页面栈数组,最后一个元素即为当前页面实例。

  2. 提取页面路径和参数:从页面实例的 route 属性获取路径,options 属性获取参数。

  3. 拼接完整地址:将路径和参数组合成完整 URL。

function getCurrentUrl() {// 获取页面栈const pages = getCurrentPages();if (pages.length === 0) return;// 当前页面实例const currentPage = pages[pages.length - 1];// 页面路径(补全前缀)const path = `/${currentPage.route}`;// 处理参数(编码特殊字符)const queryParams = currentPage.options || {};const queryString = Object.keys(queryParams).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(queryParams[key])}`).join('&');// 完整地址const fullUrl = queryString ? `${path}?${queryString}` : path;console.log('当前页面地址:', fullUrl); // 输出如:/pages/index/index?id=123
}

注意事项:

  • 平台差异:H5 端路径可能包含协议和域名,但建议使用上述跨平台方法。

  • 生命周期限制:在 App.onLaunch 等过早时机调用可能导致页面栈未生成。

  • 参数编码:使用 encodeURIComponent 处理特殊字符,确保 URL 合法性。

扩展场景:

  • H5 端获取完整 URL:若需包含协议和域名(仅 H5 有效):

// 仅适用于 H5 环境
const fullH5Url = window.location.href;

通过上述方法,可跨平台获取当前页面的路径及参数,适用于需要动态处理页面地址的场景。

http://www.xdnf.cn/news/101035.html

相关文章:

  • 【专题刷题】滑动窗口(四):
  • 华为仓颉编程语言基础概述 II
  • 【Unity笔记】Unity音效管理:ScriptableObject配置 + 音量控制 + 编辑器预览播放自动化实现
  • linux系统调用
  • 深入解析 Linux 系统中库的加载机制:从静态链接到动态运行时
  • 身份证实名认证:通往数字安全与便捷生活的钥匙
  • 出现 ORA-00904: “TENANT_ID“: 标识符无效 解决方法
  • openEuler Developer Day 2025举办!麒麟信安共筑坚实软件根基
  • MySQL数据库精研之旅第十期:打造高效联合查询的实战宝典
  • Spring Security:企业级安全架构的设计哲学与工程实践
  • 如何使用极狐GitLab 的外部状态检查功能?
  • 说一下Redis的发布订阅模型和PipeLine
  • vue3 el-table 右击
  • 深度学习--ResNet残差神经网络解析
  • LLM基础-什么是嵌入(Embeddings)
  • 反激电源中的爬电距离
  • 监督学习(Supervised Learning)与无监督学习(Unsupervised Learning)​
  • 批量将多个 Excel 表格中的某张图片替换为新的图片
  • 基础算法合集-并查集
  • 《解锁vLLM:大语言模型推理的加速密码》
  • 赞奇AIknow知识图谱能力/案例介绍
  • 在KEIL里C51和MDK兼容以及添加ARM compiler5 version编译器
  • RK3568平台开发系列讲解(调试篇)debugfs API接口及案例
  • 亚马逊选品:手工与插件的差异剖析!
  • 飞帆控件:在编辑模式下额外加载的库
  • softirq
  • 网页设计规范:从布局到交互的全方位指南
  • axios 在请求拦截器中设置Content-Type无效问题
  • Generative AI for Krita - Krita 生成式 AI 插件
  • 机器学习学习笔记