位置: IT常识 - 正文
Vue3 中 导航守卫 的使用(vue-router导航守卫)
编辑：rootadmin推荐整理分享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);})它们对于分析、更改页面标题、
上一篇：有趣的HTML实例（二） 404页面(有趣的html简单代码)