beforeEach全局守卫「建议收藏」

beforeEach全局守卫「建议收藏」//列举需要判断登录状态的“路由集合”,当跳转至集合中的路由时,如果“未登录状态”,则跳转到登录页面login;//当直接进入登录页面login时,如果“已登录状态”,则跳转到首页home;constrouter=newRouter({ routes:[{ path:’/’, //默认进入路由 redirect:’/home’ //重定向 }, { path:’/login’, name:’login’, }, { path:

大家好,又见面了,我是你们的朋友全栈君。

//列举需要判断登录状态的“路由集合”,当跳转至集合中的路由时,如果“未登录状态”,则跳转到登录页面login;
//当直接进入登录页面login时,如果“已登录状态”,则跳转到首页home;
const router = new Router({ 
   
	routes: [{ 
   
			path: '/',
			//默认进入路由
			redirect: '/home'
			//重定向
		},
		{ 
   
			path: '/login',
			name: 'login',
		},
		{ 
   
			path: '/home',
			name: 'home',
		},
		{ 
   
			path: '/list',
			name: 'list',
		},
		{ 
   
			path: '**',
			//错误路由
			redirect: '/home'
			//重定向
		}
	]
});
//全局路由守卫
router.beforeEach((to, from, next) => { 
   
	console.log('navigation-guards');
	//to: Route: 即将要进入的目标 路由对象
	//from: Route: 当前导航正要离开的路由
	//next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
	const route = ['home', 'list'];
	let isLogin = isLogin;
	//是否登录
	//未登录状态;当路由到route指定页时,跳转至login
	if(route.indexOf(to.name) >= 0) { 
   
		if(!isLogin) { 
   
			this.$router.push({ 
   
				path: '/login '
			});
		}
	}
	//已登录状态; 当路由到login时, 跳转至home
	if(to.name === 'login') { 
   
		if(isLogin) { 
   
			this.$router.push({ 
   
				path: '/home '
			})
		}
	}
	next();
});

export default router;
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/149444.html原文链接:https://javaforall.net

(0)
上一篇 2022年6月16日 下午10:07
下一篇 2022年6月16日 下午10:07


相关推荐

  • Vue生成二维码_生成二维码插件

    Vue生成二维码_生成二维码插件首先安装一下面这个插件cnpminstallvue-qr-S接下来在需要生产并下载二维码的页面引入importVueQrfrom’vue-qr’并在components中注册为组件components:{VueQr//二维码组件},data(){ return{ config:{//二维码配置logo:”,value:”} }

    2026年4月13日
    6
  • 职业目标的评估与调整_遥感图像目标检测数据集

    职业目标的评估与调整_遥感图像目标检测数据集COCO系列文章:MSCOCO数据集目标检测评估(DetectionEvaluation)(来自官网)MSCOCO数据集人体关键点评估(KeypointEvaluation)(来自官网)MSCOCO数据集输出数据的结果格式(resultformat)和如何参加比赛(participate)(来自官网)MSCOCO官网数据集(百度云)下载,COCOAPI、MASKA……

    2022年10月16日
    8
  • n8n实战:开源AI工作流平台部署与应用指南

    n8n实战:开源AI工作流平台部署与应用指南

    2026年3月14日
    2
  • js在数组指定位置添加元素_java数组删除指定位置元素

    js在数组指定位置添加元素_java数组删除指定位置元素原文链接:Array:InsertanItemataSpecificIndexwithJavaScript原文日期:2014年07月24日翻译日期:2014年07月26日翻译人员:铁锚很多与数组有关的任务听起来很简单,但实际情况并不总是如此,而开发人员在很多时候也用不到他。最近我碰到了这样一个需求:将一个元素插入到现有数组的特定索引处。听起来很容易和常见,但需要一点时间

    2022年8月11日
    7
  • 计算机网络体系结构综述(上)[通俗易懂]

    计算机网络体系结构综述(上)[通俗易懂]计算机网络体系结构标准的制定使得两台计算机能够像两个知心朋友那样能够互相准确理解对方的意思并做出优雅的回应。本文首先概述了计算机网络体系结构的提出动机,并结合日常生活中的邮政系统介绍了设计的理念,并给出了相关的基本概念和标准。进一步地,我们着重概述了计算机网络体系结构的分层原理及其最重要的组成部分——协议,使得读者能够对计算网路体系结构有一个全新的、系统的认识。

    2022年7月12日
    17
  • ajaxpro json 使用「建议收藏」

    ajaxpro json 使用「建议收藏」(一)AJAXPro之旅—神奇的小魔盒-站在巨人的肩膀上做自己的事情-博客园 -[Translatethispage]2007年9月10日…JSON.2.dll,AjaxPro.JSON.dll,web.config5个文件.其中.2结尾的是应用在.Net2.0框架下的类库.(个人使用的是2.0的,以下的教程也是应用在2.0下的)…www.cnblogs.c…

    2022年7月15日
    19

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号