uni-app全局监听页面路由变化

最新推荐文章于 2025-09-27 16:57:44 发布

原创最新推荐文章于 2025-09-27 16:57:44 发布 · 7.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #javascript #vue.js #前端

该文章介绍了如何在uni-app中通过App.vue配置全局监听页面路由变化。通过读取pages.json文件生成白名单列表，然后使用watch对象监听$route，根据hasPermission函数判断路径是否在白名单内，决定是否允许跳转。如果不允许，程序将重定向到首页。

uni-app全局监听页面路由变化

在App.vue文件中配置以下代码，具体注释代码行中已标注。

<script>
	import { watch } from 'vue'
	import { pages } from '/pages.json'
	// 白名单列表（手动写或者引入pages.json进行循环遍历创建）
	const whiteList = ['/']
	// 遍历获取页面路径加入白名单
	for(let item of pages) {
		whiteList.push(`/${item.path}`)
	}
	// 判断是否满足跳转条件
	const hasPermission = (url)=> {
		// 在白名单中，直接返回true跳转
		if (whiteList.indexOf(url) !== -1) {
			return true;
		}
		return false;
	}
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		watch: {
			$route(to, from) {
				if(hasPermission(to.path)) {
					console.log('直接通过')
				} else {
					console.log('不通过，做相关处理（如跳转首页）');
					uni.redirectTo({
						url:'/pages/index/index'
					})
				}
			}
		}
	}
</script>