本文主要是介绍路由守卫的小用处，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
话不多说,直接上图分析:
一.导入所需的功能模块:
第一二行分别导入路由模块和vuex模块,第三四行导入的模块是一个有进度条效果的小组件,具体使用可以去搜索NProgress,
二.白名单
第六行何为白名单?就是简单理解就是跟黑名单反义词,黑名单里面的内容时不允许被打扰和访问了的,白名单就是相反可以访问和被打扰的
三.全局前置守卫
第八到三十行都是路由守卫的部分,它有三个值分别是from(从哪来),to(到哪去),next(接下来想干嘛).
注意:
next:它是一个函数
如果直接放行 next()
如果跳转到其他页 next(其他页)
然后搭配下图我们就能做到登录退出的限制了
其中主要介绍一下不好理解的代码,
第十六行的判断条件是判断从vuex里面拿到的数据是否存在
第九行的代码是进度条的起始时间
第十四行的代码是进度条的终止时间
第十八行的代码是调用vuex的actions里面getUserInfo函数(发起ajax请求),因为ajax请求是异步任务,所以需要用async和await
四.全局后置守卫
第三十二到三十四行就是全局后置守卫,里面的代码的具体作用就是控制进度条的消失时间了.
这篇关于路由守卫的小用处的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
