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

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>