Vue路由导航守卫

• 导航守卫的作用：保护路由的的安全（权限），类似于“御前侍卫”
• 分类：全局守卫、独享守卫、组件内守卫
• 使用导航守卫时，一般要对路由进行命名（name）

一、全局路由守卫

需要在暴露 router 之前设置

 

1. 全局前置路由守卫

● 通过beforeEach()实现，在初始化以及每次路由 切换之前 和初始化会调用里面的函数
● 该函数接受三个参数 to,from,next

   ○ to：要跳转到的目标路由，可以获取到目标路由的信息
   ○ from：从哪里来
   ○ next:：放行函数，必须加上 next() 才会进行跳转，继续接下来的操作
        ● next可以直接调用，即：next()，表示放行所有的
        ● next 也可以放行到指定路由中，即：next ( path )
        ● next(false)：中断当前导航

2. 全局后置路由守卫

• afterEach()
• 初始化时执行、每次路由切换后执行
• 接收两个参数：to、from
• 后置路由守卫常用于修改网页 title

//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
	if(to.meta.title){ 
		document.title = to.meta.title //修改网页的title
	}else{
		document.title = '默认名字'
	}
})

 

二、独享路由守卫

• 某个路由所单独享有的守卫
• 在需要独享守卫的路由里进行设置（routes）
• beforeEnter()，在进入路由之前执行
• 接收三个参数：to、from、next()

三、组件内路由守卫

● 在组件内的守卫

1. 进入守卫

• beforeRouterEnter()
• 通过路由规则，进入该组件时调用

2. 离开守卫

• beforeRouteLeave ()
• 通过路由规则，离开该组件时调用