位置: IT常识 - 正文
推荐整理分享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简单代码)
友情链接: 武汉网站建设