路由守卫的三个参数to：要跳转到的目标路由
from：从当前哪个路由进行跳转
next：不做任何阻拦，直接通行
注意： 必须要确保 next函数 在任何给定的导航守卫中都被调用过一次。它可以出现多次，但是只能在所有的逻辑路径都不重叠的情况下，否则会报错。
案例：
router.beforeeach((to, from, next) => { if (to.name !== 'login' && !isauthenticated) next({ name: 'login' }) else next()})
一、全局路由守卫全局路由守卫有三个：全局前置守卫，全局后置守卫,全局解析守卫
全局前置守卫
1.使用方式：main.js中配置,在路由跳转前触发，这个钩子作用主要是用于登录验证，也就是路由还没跳转提前告知，以免跳转了再通知就为时已晚
2.代码:
router.beforeeach((to,from,next)=>{})
3.例子:做登录判断
router.beforeeach((to,from,next)=>{ if(to.path == '/login' || to.path == '/register'){ next(); }else{ alert('您还没有登录，请先登录'); next('/login'); }})
全局后置守卫
1.使用方式：main.js中配置,和beforeeach相反，它是在路由跳转完成后触发，它发生在beforeeach和beforeresolve之后，beforerouteenter（组件内守卫）之前。钩子不会接受next函数也不会改变导航本身
2.代码:
router.aftereach((to,from)=>{<!--{cke_protected}{c}%3c!%2d%2d%20%2d%2d%3e-->})
全局解析守卫
1.使用方式：main.js中配置,这个钩子和beforeeach类似，也是路由跳转前触发，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，即在 beforeeach 和 组件内beforerouteenter 之后，aftereach之前调用。
2.代码:
router.beforeresolve((to,from,next)=>{<!--{cke_protected}{c}%3c!%2d%2d%20%2d%2d%3e-->})
一、组件内守卫组件内守卫有个三个：路由进入之前beforerouteenter，路由离开时beforerouteleave,页面更新时beforerouteupdate
beforerouteenter(to, from, next)
1.使用方式：在组件模板中使用,跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
2.代码:
beforerouteenter(to, from, next) { // 在组件生命周期beforecreate阶段触发 console.log('组件内路由前置守卫 beforerouteenter', this) // 访问不到this next((vm) => { console.log('组件内路由前置守卫 vm', vm) // vm 就是this }) },
beforerouteupdate(to, from, next)
1.使用方式：在组件模板中使用,跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
2.代码:
beforerouteupdate (to, from, next) { // 同一页面，刷新不同数据时调用， // 可以访问组件实例 }
beforerouteleave(to, from, next)
1.使用方式：在组件模板中使用,跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
2.代码:
beforerouteleave (to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例}
路由独享守卫路由独享守卫只有一个:进入路由时触发beforeenter
路由独享守卫 beforeenter(to, from, next)
1.使用方式：在router.js中使用,路由独享守卫是在路由配置页面单独给路由配置的一个守卫
2.代码
const router = new vuerouter({ routes: [ { path: '/foo', component: foo, beforeenter: (to, from, next) => { // ... } } ]})
导航解析流程1.触发进入其它路由
2.调用要离开路由的组件守卫beforerouteleave
3.调用全局的前置守卫beforeeach
4.在重用的组件里调用 beforerouteupdate
5.在路由配置里的单条路由调用 beforeenter
6.解析异步路由组件
7.在将要进入的路由组件中调用beforerouteenter
8.调用全局的解析守卫beforeresolve
9.导航被确认
10.调用全局的后置钩子aftereach
11.触发 dom 更新mounted
12.执行beforerouteenter守卫中传给 next的回调函数
以上就是vue3中7种路由守卫如何使用的详细内容。