uniapp 页面监听上级跳转路径
时间: 2025-07-05 19:08:33 浏览: 6
### 实现 UniApp 监听上一页跳转路径
在 UniApp 中,可以通过 `getCurrentPages()` 方法来获取当前页面栈的信息,并从中解析出上一级页面的相关信息。为了更全面地处理页面间的跳转逻辑以及监听这些跳转事件,在 App.vue 文件内设置全局拦截器是一个常见做法。
#### 使用全局拦截器监听路由变化并捕获参数
通过修改 `onLaunch` 生命周期函数可以注册多个 API 的拦截器,比如 `navigateTo`, `redirectTo`, `switchTab` 和 `reLaunch` 等方法。每当发生上述类型的页面跳转操作时就会触发相应的回调函数[^1]:
```javascript
export default {
onLaunch: function (options) {
const events = ['navigateTo', 'redirectTo', 'switchTab'];
events.forEach((item) => {
uni.addInterceptor(item, {
success(e) {
// 当成功执行指定的API后会进入这里
console.log('Intercepted navigation:', e);
// 可在此处添加自定义业务逻辑,如记录日志或更新应用状态
}
});
});
},
}
```
对于想要具体知道是从哪个页面跳转而来的需求,则可以在每次成功的页面跳转之后立即读取当前页面堆栈顶部的对象属性 `$page.from` 来判断前一个页面的位置:
```javascript
methods: {
watchRouterSuccess() {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
if (currentPage && currentPage.$page.from) {
console.log(currentPage.$page.from); // 输出上一页URL
}
let fullPath = currentPage?.route || '';
Object.keys(currentPage.options).forEach(key => {
fullPath += `/${key}=${encodeURIComponent(currentPage.options[key])}`;
});
console.log(fullPath, "这是完整的跳转路径");
}
}
```
以上代码片段展示了如何利用 `getCurrentPages()` 函数访问最近一次浏览的历史记录条目,并提取其中有关来源页面的数据。注意这里的 `fullPath` 构建方式适用于简单情况下的 URL 参数拼接;实际开发中可能还需要考虑更多细节以确保兼容性和安全性[^2]。
此外,如果应用程序中有复杂的多级嵌套视图或者其他特殊情况,建议深入研究官方文档关于页面生命周期管理的部分,以便更好地理解和运用相关特性[^3]。
阅读全文
相关推荐


















