海绵宝宝

Vue3路由守卫

在vue路由中，有三种路由守卫，分别是前置守卫、解析守卫、后置守卫。

路由跳转是一个大的过程，其中包括路由跳转前（前置守卫），跳转中（解析守卫），跳转后（后置守卫）等时间节点，路由守卫就是这些时间节点内的函数钩子。

前置守卫

beforeEach:

router.beforeEach((to,from[,next]) => {
	内部操作
})

参数说明：

1. to:表示要跳转到的路由对象（目标路由）。
   • a. to.path:目标路由的路径
   • b. to.name:目标路由的名称
   • c. to.params:目标路由中的动态参数
   • d. to.query:目标路由中的查询参数
2. from:表示从哪个路由开始跳转（来源/起始路由）。
   • a. from.path:来源路由的路径
   • b. from.name:来源路由的名称
   • c. from.params:来源路由中的动态参数
   • d. from.query:来源路由中的查询参数
3. next:这是一个函数，用来控制路由导航行为，释放路由出口的。如果写上了该参数，那么：

   确保 next 在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错。

也就是如果路由守卫内部有分支语句，那么不管怎样，next()函数必须被调用一次。

next函数可能出现的情况：
a. 不带参数：next(),代表跳转到目标路由，也就是to那个路由。
b. 带上路径参数：next(‘/login’),跳转到指定路由，这里也就是跳转到指定的/login路由。
c. 带上false参数：next(false),取消这次导航，阻止这次导航的跳转。

其中from是来源路由，to是目标路由。

解析守卫