Vue3 中 导航守卫 的使用(vue-router导航守卫)

Vue3 中 导航守卫 的使用 目录前言：一、什么是导航守卫？二、导航守卫有哪几种？1、全局守卫（3个）全局前置守卫全局解析守卫全局后置钩子2、路由独享守卫（1个）3、组件内守卫（3个）beforeRouteEnter(to, from, next)beforeRouteUpdate(to, from, next)beforeRouteLeave(to, from, next)三、导航守卫的三个参数四、如何在 vue3 中使用 beforeRouteEnter五、模拟登录注册案例总结：前言：

推荐整理分享Vue3 中 导航守卫 的使用(vue-router导航守卫)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue导航实现,vue路由守卫导航栏权限配置,vue导航守卫实现登陆注册实例,vuerouter导航守卫,vue中的导航守卫,vue导航守卫实现登陆注册实例,vue-router导航守卫,vuerouter导航守卫,内容如对您有帮助，希望把文章链接给更多的朋友！

在编写vue里的登录注册时，我们始终绕不开对导航守卫的使用，vue-router4.0版里有一些重要更新，在这里分享给大家。

一、什么是导航守卫？

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。

查看以下情形：

点击主页链接时，默认情况下可直接进入指定界面，如图，但是问题是该跳转的界面是需要用户登录后方可访问的

可设置导航守卫来检测用户是否登录，如果已登录，则进入后台页，如果未登录，则强制进入登录页，如图

二、导航守卫有哪几种？1、全局守卫（3个）全局前置守卫

每次发生路由的导航跳转时，都会触发全局前置守卫，因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制

1、 使用方式

你可以在router/index.js 页面中使用router.beforeEach((to, from, next) => {}) 注册一个全局前置守卫。

2、 代码：// router/index.js 页面router.beforeEach((to, from, next) => { console.log(to, from); next()});全局解析守卫1、 使用方式

你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，因为它在 每次导航时都会触发，但是确保在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用。

2、 代码：// router/index.js 页面router.beforeResolve((to, from, next) => { console.log(to,from); next()})全局后置钩子1、 使用方式

你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：

2、 代码：// router/index.js 页面router.afterEach((to, from) => { console.log(to,from);})

它们对于分析、更改页面标题、