本文主要是介绍vue3中路由守卫的快速上手，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
路由守卫或者说路由拦截，在我们实际开发前端项目中是经常用到的操作；
通过路由守卫，可以在用户访问某个路由之前进行权限验证。（全局前置守卫）例如，可以检查用户是否登录，是否具有访问该路由的权限，如果不满足条件，则可以将用户重定向到其他页面或显示相应的提示信息。
全局前置守卫（在每次路由跳转之前被触发）
可以使用 router.beforeEach 注册一个全局前置守卫
// 前置守卫router.beforeEach((to, from) => {}
)当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。
每个守卫方法接收两个参数：
to: 即将要进入的目标
from: 当前导航正要离开的路由
可以返回的值如下:
false: 取消当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到from路由对应的地址。- 一个路由地址: 通过一个路由地址重定向到一个不同的地址，如同调用
router.push()，且可以传入诸如replace: true或name: 'home'之类的选项。它会中断当前的导航，同时用相同的from创建一个新导航。
// 前置守卫
// 全局拦截、除了登录页面，其他页面都必须授权（这里为pinia定义的token不为空）才能访问
router.beforeEach((to, from) => {
const useToken=useTokenStore()
if (to.name !== 'login' && !useToken.token) {return { name: 'Login' }
}
else{return true}
}
)在这个路由全局拦截方法中，我们规定如果只有login页面才能被所有人访问，访问的页面不是login页面都要有身份认证（pinia定义的token）才行，如果没有、则会自动跳到login登录页面，这在我们前端开发中是经常用到的。
如果遇到了意料之外的情况，可能会抛出一个 Error。这会取消导航并且调用 router.onError() 注册过的回调。
如果什么都没有，undefined 或返回 true，则导航是有效的，并调用下一个导航守卫
可选的第三个参数 next
在之前的 Vue Router 版本中（vue-router3），还可以使用 第三个参数 next 。在最新版的vue-router4版本中，官方移除了next参数，推荐我们只使用to、from这两个参数。然而，它仍然是被支持的，这意味着你可以向任何导航守卫传递第三个参数。
在这种情况下，确保 next 在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错。
错误的next使用方法：(这时，如果用户没有携带token，那么next会被调用两次)
// 前置守卫
// 全局拦截、除了登录页面，其他页面都必须授权（这里为pinia定义的token不为空）才能访问
router.beforeEach((to, from, next) => {
const useToken=useTokenStore()
if (to.name !== 'login' && !useToken.token) {next({name: 'login'})
}next()}
)正确的用法：（务必确保next只被调用一次）
// 前置守卫
// 全局拦截、除了登录页面，其他页面都必须授权（这里为pinia定义的token不为空）才能访问
router.beforeEach((to, from, next) => {
const useToken=useTokenStore()
if (to.name !== 'login' && !useToken.token) {next({name: 'login'})
}
else{next()
}
}
)全局后置钩子（在每次路由跳转之后被触发）
可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会改变导航本身
// 后置守卫
router.afterEach((to, from) => {
console.log('路由跳转的路径====>',to.path)
}
)一般来说，我们经常使用前置钩子，因为它能够在我们跳转路由之前进行拦截。后置钩子我们一般用于分析、记录日志、声明页面等辅助功能以及许多其他事情都很有用。
全局解析守卫
可以用 router.beforeResolve 注册一个全局守卫。它在每次导航时都会触发，不同的是，解析守卫刚好会在导航被确认之前、所有组件内守卫和异步路由组件被解析之后调用。这意味着在路由对象被创建之后，但还没有被解析或渲染时，全局解析守卫将会被触发。
router.beforeResolve( to => {if (to.meta.requiresCamera) {try {} catch (error) {if (error instanceof NotAllowedError) {// 处理错误，然后取消导航return false} else {// 意料之外的错误，取消导航并把错误传给全局处理器throw error}}}
})router.beforeResolve 是获取数据或执行任何其他操作（如果用户无法进入页面时你希望避免执行的操作）的理想位置。
组件内的守卫
组件内的守卫分为三种：
beforeRouteEnter：在渲染该组件的对应路由被验证前调用 ，当守卫执行时，组件实例还没被创建！
注意：在 vue3 中的 setup 函数中是不可以使用 beforeRouterEnter 这个路由守卫的
方法一、我们可以在设置路由的时候，使用beforeEnter方法拦截，即在router.js中：
{path: '/users/:id',component: UserDetails,beforeEnter: (to, from) => {
// 可以在定义路由的时候监听from和toreturn false},}方法二、使用选项式api，就可以使用beforeRouterEnter这个钩子了
<script>
export default {beforeRouteEnter(to, from) {console.log('before router enter', to, from)}
}
</script>beforeRouteUpdate： 在当前路由改变，但是该组件被复用时调用
举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候
onBeforeRouteUpdate((to,from)=>{
console.log(from.path,'更新为了',to.path);}beforeRouteLeave：在导航离开渲染该组件的对应路由时调用
// 在导航离开渲染该组件的对应路由时调用
onBeforeRouteLeave((to,from)=>{
console.log(from.path,'离开了');})这篇关于vue3中路由守卫的快速上手的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
