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


相关推荐

  • Vue 跨域配置「建议收藏」

    Vue 跨域配置「建议收藏」在package.json同级目录下新建文件vue.config.js;内容如下:module.exports={//自行复制黏贴proxyTable:{‘/java’:{//以/java开头的地址会被替换成下面的target,/java本身会被重写成下面的pathRewritetarget:’http://zaxytest.ciih.net/java’,//后台apichangeOrigin:t

    2022年7月23日
    6
  • 在线词云制作生成 tagxedo

    在线词云制作生成 tagxedo在线词云制作生成tagxedo在线词云10行Python代码的词云待办在线词云原博文地址和详细使用方法介绍在线词云制作tagxedo在线网址http://www.tagxedo.com/注意点:直接访问http://www.tagxedo.com/app.html可能会超时,先进主页再点击右上角的create按钮进入创作页面会加载更快;需要下载一个软件,使用IE浏览器可加载上述软件,谷歌和EDGE实测都无法加载;导出的词云图片:10行Python代码的词云原博客地址:1

    2022年10月26日
    0
  • @RequestMapping和@GetMapping @PostMapping 区别

        最近学习看一些代码,发现对于发送请求这件事,有的地方用@RequestMapping,有的地方用@PostMapping,为了搞清楚区别,特意查了下spring源代码,现在特此记录下。 @GetMapping用于将HTTPget请求映射到特定处理程序的方法注解具体来说,@GetMapping是一个组合注解,是@RequestMapping(method=RequestM…

    2022年4月7日
    468
  • c语言用命令行打开文件_c语言无法打开文件

    c语言用命令行打开文件_c语言无法打开文件linux文件操作(打开及关闭)Linux文件描述符简介当一个进程获取文件的访问权时,通常指打开一个文件时,内核返回一个文件描述符,进程可以通过文件描述符进行后续的操作。文件描述符是一组正整数,每一个文件被打开时,内核都会打开一个大于或等于0的文件描述符。文件描述符012这是linux系统保留的三个文件描述符。0代表标准输入stdin1代表标准输出stdout2代表错误输出s…

    2022年10月31日
    0
  • vue(16)vue-cli创建项目以及项目结构解析[通俗易懂]

    vue(16)vue-cli创建项目以及项目结构解析[通俗易懂]vue-cli创建项目上一篇我们安装了vue-cli,接下来我们就使用该脚手架进行创建项目1.进入一个目录,创建项目创建项目命令如下:vuecreate<ProjectName&g

    2022年7月31日
    16
  • Linux-权限管理(你听过777、755、644吗)

    Linux-权限管理(你听过777、755、644吗)你听过777、755、644吗?文章目录组rwx权限修改权限-chmod修改文件所有者-chown修改文件所在组-chgrp

    2022年6月17日
    32

发表回复

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

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