Vue路由守卫
路由守卫，简单理解来说就是，当用户要进行一些操作时，需要用户的一些信息或数据或行为，判断过后，才会同意用户进行操作。
说到这里，大家心里都或多或少有点理解了吧，官方一点的解释就是进行操作的鉴权，当操作与之条件匹配时，操作成功，当操作与之不匹配时，操作终止，作用就是是对路由进行权限控制。
在Vue中，路由守卫分为三种：全局路由守卫、独享路由守卫、组件内路由守卫。
一、全局路由守卫
全局路由守卫，顾名思义，一旦配置，那么作用范围就是所有的路由，全局路由又分为全局前置守卫和全局后置守卫
全局前置守卫
全局前置守卫，组件初始化时调用，每次路由切换之前调用，路由切换之前指的就是，举个例子说，当前我在A路由组件，我要切换到B路由组件，那么前置路由守卫就是在我点了切换按钮，但B路由组件还没有被呈现在页面上的时候被调用。
//全局前置守卫
router.beforeEach((to,from,next) =>{
//第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
//第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
//第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
})
全局后置守卫
全局后置守卫，组件初始化时调用，每次路由切换之后调用，路由切换之后指的就是，举个例子说，当前我在A路由组件，我要切换到B路由组件，那么前置路由守卫就是在我点了切换按钮B路由组件呈现到页面中后被调用。
//全局后置守卫
router.afterEach((to,from) =>{
//第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
//第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
二、独享守卫
组件独享守卫是在进入组件时被调用，区别就在于，想对那个路由进行权限控制就直接在其路由配置项中添加守卫，作用域也仅限于该路由。
beforeEnter(to,from,next){
//第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
//第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
//第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
}
可自行去尝试，其实效果都是一样的，只不过，全局路由守卫服务的是所有路由组件，而独享路由守卫只服务于被配置的单个路由组件
三、组件内守卫
当使用路由规则进入该组件或离开该组件时，就会触发组件内守卫的调用，而组件内守卫的作用于范围也仅限于该组件
//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
//第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
//第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
//第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
//第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
//第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
//第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
}
唯一不同于之前的就是
BeforeRouterLeave()它并不像全局后置守卫一样在路由组件加载完成之后调用，而是在你切换出这个组件后被调用，也就是离开这个组件后被调用。
在开发中，我们也可以使用BeforeRouterLeave() 来完成某些操作，比如当我要切换出该组件时，我希望该组件的操作能暂停，而不是一直运行，只有当我切换回该组件时，又再次运行，这样的操作就可以配合着beforeRouteEnter() 来完成，也可以提高应用的性能。
整理自【Vue路由守卫】
文章推荐Vue3 Vite3 状态管理 pinia 基本使用、持久化、在路由守卫中的使用