uniapp小程序tabbar跳转拦截与弹窗控制

一、第一步

1、App.vue中定义globalData用于全局存储状态

globalData:{
			needShowReleaseConfirm: false, // 标记是否需要显示发布页面确认弹窗
			allowReleaseJump: false ,// 标记是否允许跳转到发布页面
		},

2、在App.vue中的onLaunch写入监听事件

	onLaunch: function() {
			// 添加switchTab拦截器
			const app = this;
			uni.addInterceptor('switchTab', {
				invoke: (args) => {
					console.log('switchTab拦截器触发', args);
					// 获取当前页面路径
					const pages = getCurrentPages();
					if (pages.length > 0) {
						const currentPage = pages[pages.length - 1];
						const currentRoute = currentPage.route;
						
						// 判断是否跳转到release页面（从任何tabbar页面）
						if (args.url === '/pages/release/release') {
							// 如果已经允许跳转，则清除标记并正常跳转
							if (app.globalData.allowReleaseJump) {
								console.log('用户已确认，允许跳转到release页面');
								app.globalData.allowReleaseJump = false;
								app.globalData.needShowReleaseConfirm = false;
								return true;
							}
							
							console.log('检测到跳转到release，需要显示确认弹窗');
							// 设置全局标记，需要显示确认弹窗
							app.globalData.needShowReleaseConfirm = true;
							// 触发当前页面显示弹窗
							uni.$emit('showReleaseConfirm');
							// 阻止跳转
							return false;
						}
					}
					// 其他情况正常跳转
					app.globalData.needShowReleaseConfirm = false;
					app.globalData.allowReleaseJump = false;
					return true;
				}
			});
		},

二、第二步

我的需求是从任何tabbar页面跳转到release这个tabbar页面时都弹窗出来，点击选择后才会跳转，如图

这些弹窗需要写到跳转前的页面里，比如从index页面跳转到release页面前要弹窗，就把这个弹窗写到index页面。

1、拿index页面来实例,在index.vue页面的created中监听收到的状态，来决定是否显示弹窗。

created() {
			// 监听全局事件，当要跳转到发布页面时显示确认弹窗
			uni.$on('showReleaseConfirm', () => {
				console.log('收到显示发布确认弹窗事件');
				this.showReleaseModal = true;
			});
		},