2022-11-15 vue笔记-路由vue-router(四) 路由守卫(又称路由拦截,导航守卫)的定义以及示例

0.路由的概念

路由其实是一种映射关系。

• 生活中的路由：设备和ip的映射关系；
• node.js路由：接口和服务的映射关系；
• （前端）Vue中的路由：路径和组件的映射关系。

1.路由守卫的定义

定义

路由守卫又称导航守卫，指是路由跳转前、跳转中、跳转后过程中的一些钩子函数。

官方解释

vue-router提供的导航守卫，要通过跳转或取消的方式来守卫导航。

路由守卫的分类

全局路由、组件内路由，路由独享。

钩子函数

1.全局路由的钩子函数有：beforeEach、beforeResolve、afterEach（参数中没有next）
2.组件内路由的钩子函数有：beforeRouterEnter、beforeRouteUpdate、beforeRouteLeave
3.路由独享的钩子函数有：beforeEnter

2.路由守卫的使用场景

给路由添加一个权限判断:路由跳转之前，会触发一个函数
场景:用户在登录的状态下就能去到某页面，但是未登录则给你弹出一个未登录的提示。

3.语法:router.beforeEach((to,from,next) => {}

let isLogin = false; //未登录
router.beforeEach((to,from,next) => {
   
	//路由跳转“之前”先执行这里，决定是否跳转
	if (to.path === '/Login' && isLogin === false) {
   
		alert("请登录”)
		next(</