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

什么是路由守卫？

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

路由守卫分为三大类：

1. 全局守卫：beforeEach

2. 路由独享的守卫：beforeEnter

3. 组件内的守卫：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave

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

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

next函数具体使用方法：

全局守卫

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 守卫：

const router = new Router({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
		if (sessionStorage.getItem("token")) {
			next();
		} else {
			alert("请先登录");
			next("/login");
		}
      }
    }
  ]
})

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

组件内部守卫

在组件内部使用，和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://www.jianshu.com/p/190d0000a181