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>

在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐