uni-app - 实现监听路由跳转，每次跳转的时候都能触发的事件（当页面路由发生变化时，触发一个封装好的请求接口或普通功能函数）全端兼容，高效简洁无 BUG 详细教程

已于 2025-01-19 16:13:10 修改
阅读量8.4k 收藏 5
点赞数 6
CC 4.0 BY-SA版权
分类专栏： + UniApp + Uniapp 开发问题汇总 文章标签： uni-app H5 App 小程序全兼容 监听路由页面跳转 路由发生变化时请求接口 uni官方最好用的教程
于 2022-12-02 15:27:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44198965/article/details/128144906
本文介绍如何在uni-app中实现全端兼容的路由跳转监听，当页面路由变化时自动触发预设函数，包括兼容uniapp v2/v3的实现代码，注意事项，以及如何处理微信小程序Tabbar页面的监听问题。通过uni.addInterceptor实现拦截器，确保每个页面路由变化时都能执行特定功能，如请求接口或执行自定义逻辑。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

当用户点击任意页面时（路由发生变化），自动执行一个函数，调用接口请求数据、做任何事情。

由于涉及到全部页面，必须采用统一的入口和统一的执行函数，不可能一个页面写一次！！

支持 uniapp v2 / v3 版本，基于这个需求，本文实现了 全局统一监听路由跳转，当页面发生变化时自动触发某个函数，

如下图所示，无论是 navigateTo redirectTo reLaunch switchTab navigateBack 跳转的页面，只要跳页面了都会执行：

使用本文的方法，您可以自由控制如上路由跳转 API 哪些不监听（比如不想监听 reLaunch 路由跳转）。

在这里插入图片描述

实现代码

以下示例

了解本专栏 订阅专栏 解锁全文
uniapp 全局混入：监听路由变化，路由变化即执行
草巾冒小子的博客
05-06 843
这样，每个页面都会混入这些生命周期方法，当路由发生变化时，就会打印相应的日志。这是一个简单的全局监听路由变化的方法，可以在实际项目中根据需要进行扩展和应用。在uni-app中，可以使用onShow和onHide方法来监听页面的显示和隐藏，但如果需要全局监听路由变化，可以使用onLoad和onUnload方法。
uniapp 小程序 监听全局路由跳转 获取路由参数
weixin_45563734的博客
12-02 893
【代码】uniapp 小程序 监听全局路由跳转 获取路由参数。
uniapp 发布 H5监听路由变化
weixin_59685936的博客
06-14 886
uniapp 发布 H5监听路由变化
uni-app的生命周期和路由配置
qq_52904412的博客
08-01 995
uni-app的生命周期和路由配置
uniapp中路由跳转权限控制
最新发布
qq_59728477的博客
06-21 280
这个文件主要实现的功能就是通过token来校验是否放行，如果token没有的话，就去判断白名单里面是否有匹配路由，如果没有就跳转到登录页面，这里面并没有注册页面的路由（第二个注册路由是我后加上的）在使用芋道框架封装的项目时，发现在登录页面点击去注册始终跳转不了，于是经过一番查找发现main.js文件中引入了权限控制文件。原理就是通过uniapp框架提供的路由拦截器API。
uniapp全局监听路由跳转方法，H5亲测有效
qq_28546559的博客
05-29 460
一，在main.js，创建了app对象后，app.$router中监听beforeEach，afterEach事件。二，通过$emit提交事件，$on全局监听事件。
uniapp 监听路由跳转
我总是词不达意的博客
10-14 5456
uniapp 监听路由跳转
uniapp切换路由监听导航跳转（在监听网络状态时非常常用）
weixin_53339757的博客
12-29 8454
实时监听路由跳转
uniapp 小程序 安卓 ios 通用监听路由跳转方法
m0_56381003的博客
12-20 246
【代码】uniapp 小程序 安卓 ios 通用监听路由跳转方法。
uniapp 监听原生tabbar 点击跳转事件
weixin_44881623的博客
06-07 1113
【代码】uniapp 监听原生tabbar 点击跳转事件。
uni-app的六种路由页面跳转方式
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
01-31 1万+
uni.navigateTo({url: "/路径?参数=参数值"}); uni.redirectTo({url: "/路径?参数=参数值"}); uni.reLaunch({url: "/路径?参数=参数值"}); uni.switchTab({url: "/路径?参数=参数值"}); uni.navigateBack({delta: 2}); uni.preloadPage({url: "/路径?参数=参数值"}); uni.navigateTo(OBJECT) 保留当前页面，跳转到应用内的某个页.
uni-app 经验分享，从入门到离职（四）——页面栈以及页面跳转的 API（开发经验总结）
热门推荐
黛琳ghz的博客，期待你的关注。
02-21 3万+
这篇文章是本专栏 uni-app 的项目实战篇，主要内容的是页面栈以及页面跳转的 API，页面栈是 uni-app 中一个重要的概念，它用于管理应用程序中的页面层级关系。接下来讲一下如何利用页面栈来实现页面之间的切换和导航，以及如何使用 uni-app 提供的 API 来进行页面跳转等等知识点。
uni-app学习--基础组件使用、页面生命周期、本地存储、网络请求、条件编译、路由跳转
ChenLingZhi1115的博客
06-05 1558
uni-app提供了丰富的基础组件给开发者，开发者可以像搭建积木一样，组合各种组件拼接成自己的应用 uni-app中的组件，就像html中的div,p,span等标签的作用一样，用于搭建页面的基础结构 https://uniapp.dcloud.net.cn/component•text组件相当于行内标签，在同一行显示(相当于span标签) •除了文本节点以外的其他节点都无法长按选中 • 组件内只支持嵌套 ，不支持其它组件或自定义组件，否则会引发在不同平台的渲染差异。但text嵌套text在小程序中布局是有
uni-app多端开发
weixin_43993776的博客
11-08 2118
开场白： 要是在 vscode 书写代码， 需要添加 几个插件来支持 uni-app。
【翻译一下官方文档】之uniapp的路由跳转
coderwwh的博客
04-23 571
这里总结下关于页面跳转的一些基础知识。
使用uniapp如何监听页面的跳转？
松岛川树
10-10 2510
试试路由插件 uni-simple-router
[学习]uni-app监听原生标题页面跳转
qq_36926045的博客
12-07 1739
page.json设置原生标题 "titleNView": { "buttons": [{ "text": "新增", "float": "right", "fontSize": "14", "width": "55px"}] } 在设置原生标题页面，监听原生标题栏按钮点击事件，参数为Object uni-app-生命周期 onNavigationBarButtonTap(e...
uni-app : 监听路由变化
iOSTianNan的博客
07-21 4999
uniapp 路由全局监听
uni-app全局监听页面变化的函数
03-14
<think>好的，我现在需要帮助用户解决关于uni-app中全局监听页面生命周期变化的问题。用户提到了onShow和onHide，但不确定如何全局监听这些页面级别的生命周期函数。首先，我应该回顾uni-app的生命周期结构，确保自己理解正确。 根据用户提供的引用内容，uni-app的生命周期分为应用、页面和组件三个层次。应用生命周期如onLaunch、onShow、onHide等，这些是全局的，但页面生命周期如onLoad、onShow、onShow是页面级别的，每个页面单独触发。用户的问题是如何全局监听页面的变化，比如所有页面的onShow和onHide事件。 接下来，我需要确认uni-app官方是否有直接支持全局监听页面生命周期的方法。根据引用内容，应用生命周期中的onShow和onHide是应用级别的，当应用从后台进入前台或反之触发，而不是针对单个页面的切换。而页面生命周期的onShow和onHide属于各个页面自己的事件，无法直接通过应用生命周期来全局捕获。 因此，用户可能需要一种方法来在每个页面的生命周期事件被触发时，执行一些全局的逻辑。这时候，通常的做法是使用全局混入（mixins）或者拦截页面跳转的方法。例如，在main.js中使用Vue.mixin来为每个页面的生命周期添加钩子函数，这样每当任何页面的onShow或onHide被触发时，全局的代码就会执行。 另外，还有一种方法是使用uni-app的事件监听机制，比如uni.$on和uni.$emit，但需要结合页面生命周期手动触发事件。例如，在每个页面的onShow中触发一个自定义事件，然后在全局监听这个事件。不过这种方法需要修改每个页面的代码，可能不够方便。 或者，可以考虑使用页面栈的变化来监听页面切换，比如在应用的onShow中检查当前页面栈的信息，但这可能不够精确，因为应用进入后台和前台也会触发onShow，而不仅仅是页面切换。 综合来看，最可行的方法应该是使用全局混入，在main.js中通过Vue.mixin为所有页面的生命周期添加钩子，从而在全局监听页面级别的onShow和onHide。同时，需要说明应用级别的onShow和onHide的触发时机与应用状态相关，而非页面切换，避免用户混淆。 此外，还要注意uni-app的页面生命周期和Vue的生命周期可能有所区别，需要引用正确的文档部分。例如，引用[4]提到了页面生命周期如onLoad、onShow等，而应用生命周期在app.vue中定义。因此，全局混入的代码应该放在main.js中，并且在每个页面加载时自动注入这些钩子。 最后，需要验证这种方法的可行性，比如创建一个简单的uni-app项目，在main.js中添加全局混入代码，然后在不同页面切换时查看控制台输出，确认全局钩子是否被正确触发。这样可以确保回答的准确性，避免给用户错误的信息。</think>在 uni-app 中，**全局监听页面生命周期变化（如页面显示/隐藏）需结合应用生命周期和页面栈管理**，因为页面级的 `onShow`/`onHide` 是各自独立的，无法直接全局监听。以下是两种实现方案： --- ### 方案一：通过应用生命周期监听页面变化 **应用级 `onShow`/`onHide` 可监听应用前后台切换**，但若需监听页面层级变化，需结合页面栈分析： ```javascript // app.vue 中定义 export default { onShow(options) { const pages = getCurrentPages(); const currentPage = pages[pages.length - 1]; console.log('应用进入前台，当前页面:', currentPage.route); // 可在此触发全局逻辑 }, onHide() { console.log('应用进入后台'); } } ``` *此方法仅能监听应用状态变化，无法精确到页面切换*[^2][^3]。 --- ### 方案二：全局混入页面生命周期（推荐） **通过 Vue 的全局混入（mixin）监听所有页面的生命周期**： ```javascript // main.js 中定义 Vue.mixin({ onShow() { console.log('页面显示:', this.$route.path); // 触发全局逻辑，例如埋点、权限校验 uni.$emit('globalPageShow', this.$route); }, onHide() { console.log('页面隐藏:', this.$route.path); uni.$emit('globalPageHide', this.$route); } }); ``` - **优点**：精确监听每个页面的显示/隐藏。 - **缺点**：需注意混入的代码对所有页面生效，避免冲突[^4]。 --- ### 方案三：拦截路由跳转 通过封装 `uni.navigateTo` 等方法，在路由跳转前后触发全局逻辑： ```javascript const originalNavigateTo = uni.navigateTo; uni.navigateTo = function(options) { console.log('全局监听：跳转到', options.url); originalNavigateTo.call(uni, options); }; // 类似地拦截 navigateBack、switchTab 等 ``` --- ### 总结 - **精确监听页面生命周期**：使用 **全局混入（方案二）**。 - **监听应用前后台状态**：使用应用级 `onShow`/`onHide`（方案一）。 - 若需区分页面层级变化，需结合 `getCurrentPages()` 获取页面栈[^1][^4]。 ---
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端开发大师鸭

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值