Vue 路由导航守卫(全局守卫、路由独享守卫、组件内守卫)

我就是我 2022-11-11 06:01 247阅读 0赞

# 什么是路由守卫？ #

路由守卫就是路由跳转的一些验证，比如登录鉴权（没有登录不能进入个人中心页）等等等。

# 路由守卫分为三大类： #

1.  **全局守卫**：`beforeEach`
2.  **路由独享的守卫**：`beforeEnter`
3.  **组件内的守卫**：`beforeRouteEnter`、 `beforeRouteUpdate`、 `beforeRouteLeave`

每个守卫方法接收三个参数：

*  `to`： 要进入的目标路由（去哪儿）
 *  `from`： 要离开的路由（从哪来）
 *  `next`： 是否进行下一步（要不要继续）

next函数具体使用方法：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]

# 全局守卫 #

1.在路由的js文件导入VUE路由对象并挂载

import Router from 'vue-router'
    
    Vue.use(Router)

2.创建路由实例

给需要守卫的路由加上： meta: \{ permission: true \},

const router = new Router({ 
      routes: [
        {  path: '/', redirect: '/login' },
        {  path: '/login', component: Login },
        {  path: '/home', component: Home,meta: {  permission: true }}
      ]
    })

3.挂载路由导航守卫

// 挂载路由导航守卫
    router.beforeEach((to, from, next) => { 
      if (to.meta.permission) { 
        if (sessionStorage.getItem("token")) { 
          next();
        } else { 
          alert("请先登录");
          next("/login");
        }
      } else { 
        next();
      }
    });

4.导出路由

export default router

# 单个路由守卫 #

你可以在路由配置上直接定义 `beforeEnter` 守卫：

这些守卫与全局前置守卫的方法参数是一样的。

# 组件内部守卫 #

在组件内部使用，和data、created、mounted、methods处于平等关系

用beforeRouteEnter举例说明：

beforeRouteEnter(to, from, next) { 
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 因为当守卫执行前，组件实例还没被创建
        if (sessionStorage.getItem("token")) { 
          next();
        } else { 
          alert("请先登录");
          next("/login");
        }
      },

# 参考 #

*  [https://blog.csdn.net/weixin\_45819748/article/details/112602826][https_blog.csdn.net_weixin_45819748_article_details_112602826]
 *  [https://www.jianshu.com/p/190d0000a181][https_blog.csdn.net_weixin_45819748_article_details_112602826]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]: /images/20221022/420c3aa137cf4957bdab9d979d624a1b.png
[https_blog.csdn.net_weixin_45819748_article_details_112602826]: https://www.jianshu.com/p/190d0000a181