vue中的路由守卫

末蓝、 2023-01-15 03:59 161阅读 0赞

***什么是导航守卫：***  
概念：导航守卫又称路由守卫，实时监控路由跳转时的过程，在路由跳转的各个过程执行相应的操作，类似于生命周期函数，在开发过程中经常被使用，比如用户点击一个页面，如果未登录就调到登录页面，已登录就让用户正常进入。

> **分为三种：**

## *一、全局守卫* ##

分为三种：

*  router.beforeEach（全局前置守卫）
 *  router.beforeResolve（全局解析守卫）
 *  router.afterEach（全局后置守卫）  
    例：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfaGFpX3lhbg_size_16_color_FFFFFF_t_70]

## *二、路由独享守卫* ##

beforeEnter(给单独的路由加)  
例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfaGFpX3lhbg_size_16_color_FFFFFF_t_70 1]

## *三、组件内守卫* ##

beforeRouteEnter(进入该路由时执行)  
beforeRouteUpdate（该路由参数更新时执行）  
beforeRouteLeave(离开该路由时执行)  
例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfaGFpX3lhbg_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfaGFpX3lhbg_size_16_color_FFFFFF_t_70]: /images/20221022/8e468d5ebab74fe28bb0e2bae2c3bb80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfaGFpX3lhbg_size_16_color_FFFFFF_t_70 1]: /images/20221022/7e52b6c0456546f9aea84316ec58c97f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfaGFpX3lhbg_size_16_color_FFFFFF_t_70 2]: /images/20221022/bf3a58864dde45b78f67671f79fbee80.png