跳转到主内容
趣航编程网 - 趣学编程,启航技术之路!

uni-app怎么获取小程序当前页面路径 uni-app路由栈信息读取【技巧】

用 getCurrentPages().pop().route 获取当前页路径,但 route 不含 query 参数,需手动拼接 options;注意三端字段差异、空值判断及避免在 onUnload 中使用。 uni-app里怎么拿到当前页面的完整路径 直接用
getCurrentPages()
,它返回的是当前路由栈的数组,最后一个就是当前页。别信网上说的“用
uni.getStorageSync('route')
”这种——uni-app 没这玩意儿,纯属误导。 注意:这个函数在小程序、H5、App 三端都可用,但返回对象的字段名略有差异,小程序端最全,
route
字段是带参数的路径(如
"pages/detail/detail?id=123"
),而 H5 端可能只有
path
和
query
分开。
getCurrentPages()
返回的是 Page 实例数组,每个元素有
$vm
(Vue 实例)、
route
(小程序路径)、
options
(页面 onLoad 接收的参数)等字段 取当前页路径推荐写法:
const currentPage = getCurrentPages().pop(); const path = currentPage.route;
如果页面是通过
uni.navigateTo({ url: 'pages/a/a?x=1' })
跳转的,
route
值就是
"pages/a/a"
,**不带 query 参数**;想拿完整地址得自己拼:
`${currentPage.route}?${Object.keys(currentPage.options).map(k => `${k}=${currentPage.options[k]}`).join('&')}`
为什么
onLoad
里的
options
有时为空 常见于从分享卡片、后台冷启动、或使用
uni.reLaunch
后再进页面时——此时页面被重建,但
onLoad
的参数只在「直接跳转」时由框架注入。一旦路由栈被清空或页面重载,
options
就丢了。 不要依赖
onLoad
的
options
做关键逻辑,尤其涉及分享场景 稳妥做法:在
onShow
或
onReady
中调用
getCurrentPages()
拿
currentPage.options
,它比
onLoad
的参数更可靠 如果必须跨生命周期保留参数,手动存到
uni.setStorageSync
,但注意清理时机,避免脏数据 读取路由栈时容易踩的坑 很多人以为
getCurrentPages()
是个“快照”,其实它是实时引用。如果你在页面卸载后(比如
onUnload
)还去访问它返回的 Page 对象,
$vm
可能已销毁,
route
字段也可能变成
undefined
。 禁止在
onUnload
里对
getCurrentPages()
结果做异步操作(比如 setTimeout 后再取 route) 不要缓存
getCurrentPages()
返回的数组本身,每次要用都重新调用——它内部是动态维护的 在自定义组件中无法直接调用
getCurrentPages()
,必须通过父页面传入,或用
uni.getCurrentPages()
(全局函数,组件里也能用) App 端和 H5 端的
route
字段可能为
null
,建议加空值判断:
currentPage.route || currentPage.path
需要获取上一页路径?别硬算 想实现“返回上一页并刷新”的逻辑,或者记录来源页,别试图用
getCurrentPages()[length-2].route
去推——路由栈长度不稳定,用户可能从桌面图标冷启、或通过分享直达,栈里就一页。 真正可靠的方案是:跳转时显式传参,比如
uni.navigateTo({ url: 'pages/b/b?from=pages/a/a' })
如果不想改跳转代码,可在全局 mixin 里统一拦截
onLoad
,把
getCurrentPages()[length-2]
的路径存在
this.$scope.fromPage
上,但仅限当前页有效 复杂场景建议用状态管理(如 Pinia / Vuex)存最近 2–3 个页面路径,比手动扒栈靠谱得多 路由栈看着简单,实际在冷启、分享、分包加载、tabBar 页面切换下行为差异很大,别图省事硬读数组索引——多传一个参数,比后期 debug 十次路径问题省力得多。

相关文章