vue路由守卫的三种类型分别是什么

vue是一套用于构建用户界面的渐进式JavaScript框架,vue与其它大型框架的区别是,使用vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用vue可以采用单文件组件和vue生态系统支持的库开发复杂的单页应用。

vue中路由守卫一共有三种,分别为:全局路由守卫(全局前置守卫,全局后置守卫),组件内路由守卫,路由独享守卫(是在路由配置页面单独给路由配置的一个守卫)。

路由守卫,也可以是路由拦截,我们可以通过路由拦截,来判断用户是否登录,该页面用户是否有权限浏览,需要结合元来实现

vue中路由守卫一共有三种,一个全局路由守卫,一个是组件内路由守卫,一个是路由器独享守卫

所谓的路由守卫可以简单的理解为一座房子的门口的保安,想要进入这个房子就必须通过保安的检查,要告诉路由守卫你从哪里来?总不能随便陌生人就给放进去?要到哪里去?然后保安再告诉你下一步该怎么做?如果你的确是这个房子主人允许进入的人,那就让你进入,否则就要打电话给房子主的人,跟房主商量(登录注册),给你权限。

<强>一。全局守卫

<强> 1。router.beforeEach((来自)=在{})

<强> 2。回调函数中的参数,:进入到哪个路由去,:从哪个路由离开,下一个:函数,决定是否展示你要看到的路由页面。

<强> 3。如下例:主要。js中设置全局守卫

<李>

在main.js中,有一个路由实例化对象路由器。在main.js中设置守卫已是全局守卫。

<李>

如下,判断to.path当前将要进入的路径是否为登录或注册,如果是就执行下(),展示当前界面。如果不是,就弹出警报,然后移至登录界面。

<李>

这样就可实现,用户在未登录状态下,展示的一直是登录界面。

router.beforeEach((下),从=祝辞{ 　　如果才能(to.path ==, & # 39;/登录# 39;,| |,to.path ==, & # 39;/注册# 39;){ 　　,,,下一个(); 　　}{其他才能 　　,,,警报(& # 39;您还没有登录,请先登录& # 39;); 　　接下来,,,(& # 39;/登录# 39;); 　　,,} 　　})

<>强4。全局后置钩子router.afterEach((,)=在{})

<李>

只有两个参数,:进入到哪个路由去,:从哪个路由离。

<李>

如下,每次切换路由时,都会弹出警报,点击确定后,展示当前页面。

router.afterEach((,)=祝辞{ 　　警报才能(“after  each"); 　　})

<强> 5。判断store.gettes。isLogin===false是否登录

<强>二。组件内的守卫

<强> 1。到达这个组件时,beforeRouteEnter:(下),从=在{}

<李>

在管理。vue文件中,点击转到管理路由时,执行beforeRouteEnter函数

<李>

,从参数与上面使用方法一致。第二回调函数略有不同。

<李>

如下例,数据组件内守卫有特殊情况,如果我们直接以
<代码> beforeRouteEnter:(下),从=祝辞{警报(“hello"+ this.name);} 进行访问管理页面,会发现提醒输出<代码>你好定义> & lt; script> 　　export  default  { 　　,,,的数据(){ 　　,,,,,,,返回{ 　　,,,,,,,,,,,的名字:“Arya" 　　,,,,,,,} 　　,,,}, 　　,,,beforeRouteEnter:(下),从=祝辞{ 　　,,,,,,,下一个(vm=祝辞{ 　　,,,,,,,,,,,警报(“hello", +, vm.name); 　　,,,,,,,}) 　　,,,} 　　} 　　& lt;/script>

<强> 2。离开这个组件时,beforeRouteLeave:(下),从=在{}

vue路由守卫的三种类型分别是什么