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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • html遮罩层动画制作,flash简单制作遮罩动画效果[通俗易懂]

    html遮罩层动画制作,flash简单制作遮罩动画效果[通俗易懂]flash简单制作遮罩动画效果QQ空间的开机动画大家应该都有,从最初的出现的一点到后面全部出现,如此神奇的效果到底是怎么做的呢,一起来看看吧!遮罩特效:由于百度只能上传500k以内的照片,所以效果图片质量不是很好,当然,我们一般做的特效是.swf,这里是为了方便大家观看,所以做成了gif.步骤:1、打开flash面板,创建新项目。2、点击文件——导入——导入一张图片。3、窗口——库,这里我们可以…

    2022年5月1日
    91
  • 跨平台应用框架_安卓前端框架

    跨平台应用框架_安卓前端框架转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。原文出处:https://dzone.com/articles/cross-platform-mobile-

    2022年8月4日
    3
  • linux下打开csv文件的软件,linux下的CSV文件操做[通俗易懂]

    linux下打开csv文件的软件,linux下的CSV文件操做[通俗易懂]先介绍一下什么是csv文件,这是一种简单的文本文件,也被称为逗号分隔值文件。linux主要是用于存储简单的数据,下面在weindows下用UE简单生成一下文件。vim而后用excel打开windows这就是一个简单的csv文件,每一个字符都是一个ANSI码,图中的第一行,1,2,3,4,5,7。数组1~7每个都是一个ANSI码,一个逗号也是ANSI码。函数第二行的12,13,434,45,56…

    2022年7月21日
    17
  • A*算法之八数码问题 python解法

    A*算法之八数码问题python解法文章目录A*算法之八数码问题python解法问题描述A*算法与八数码问题状态空间的定义各种操作的定义启发式函数的定义人工智能课程中学习了A*算法,在耗费几小时完成了八数码问题和野人传教士问题之后,决定写此文章来记录一下,避免忘记问题描述在3×3的棋盘上,摆有八个棋子,每个棋子上标有1至8的某一数字。棋盘中留有一个空格,空格用0来表示。空格周围的棋子可以移到空格中。要求解的问题是:给出一种初始布局(初始状态)和目标布局(为了使题目简单,设目标状态为12380

    2022年4月6日
    61
  • 银河麒麟v10.1_银河麒麟v10系统

    银河麒麟v10.1_银河麒麟v10系统银河麒麟v10下载(服务器版桌面版)-2022-03-16更新银河麒麟桌面操作系统V10和银河麒麟高级服务器操作系统V10,分别推出了飞腾、鲲鹏、龙芯、申威、海光、兆芯六个版本银河麒麟高级服务器操作系统V10银河麒麟桌面操作系统V10…

    2022年10月16日
    0
  • Vue生成二维码_vue实现扫描二维码

    Vue生成二维码_vue实现扫描二维码效果代码npminstallvue-qr–save<template><divclass=”sg-qrcode”><vue-qr:text=”qrcodeText”:correctLevel=”3″:size=”250″:margin=”10″colorDark=”#2ba245″

    2022年10月3日
    0

发表回复

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

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