vue 监听路由变化

最新推荐文章于 2024-08-12 14:22:13 发布

xielatian

最新推荐文章于 2024-08-12 14:22:13 发布

阅读量346

点赞数

分类专栏：笔记文章标签： vue.js javascript html vue

本文链接：https://blog.csdn.net/weixin_43979503/article/details/108783722

版权

笔记专栏收录该内容

57 篇文章 0 订阅

订阅专栏

本文探讨了如何在Vue应用中使用watch、beforeEach路由守卫和beforEach方法实现页面权限检测，当用户无权访问时，通过定时关闭窗口或定向至错误页面。详细讲解了在不同场景下的实现细节和逻辑。

摘要由CSDN通过智能技术生成

如果在某一个页面做监听

watch:{
	$route(to,from){
		let topath = to.path;
		let formPath=from.path;
		如果此时再通过接口获取到登陆用户有多少页面权限，就直接判断。
		没有权限就可以
		setTimeOut(function(){
				window.open("","_self").colse();
			},2000)
			//或者没有权限直接去固定的页面
			this.$router.push({path:"/errorPath"});
			
		}
	}
}

如果在最外层做监听，在app.vue里面

created(){
	this.$router.beforeEach((to, from, next) => {
	   	if(to.path!='/XXXX'){
	   		this.$router.push({path:"/errorPath"});
	   		next();
		}
		next();
});
}

//如果在路由里面做路由守卫
//这里有两个参数，一个是errorPath，这个表示页面加载失败，或者没权限的跳转页面，
//一个是routeList这个可以是后端通过权限返回的页面列表，
//先进入errorPath可以避免权限没有一直进入不到页面的问题

router.beforEach(async(to,from,next)=>{
		if(to.path=='errorPath'){
			next();
		}else{
			if(routeList.indexOf(to.path)<-1){
				next();
			}else{
				next({path:'errorPath'})
			}
			
		}
})