vue 路由--- 导航守卫-蒲公英云

vue 路由--- 导航守卫

个人理解：路由跳转是一个大的过程，就跟组件的创建一样，不是涉及组件的创建 — 销毁，那么路由的跳转也同样涉及到这个过程。（对接springmvc里面的拦截器，spring的aop，也就是代理模式）。

路由跳转前后对这个路由进行操作之类的。

1.全局守卫

2.单个路由守卫

1.全局守卫

3个大钩子，beforeEach、beforeResolve（2.5+）、afterEach,这个中间效果湖绿不计，其实看名字就知道就是在路由跳转跳转前后分别触发的钩子函数（就是伴随某个阶段执行的函数）

router.beforeEach((to, from, next) => {
  //to 将要访问的路径
  //from 代表从哪个路径跳转而来
  //next 是一个函数，表示放行
  // next() 放行  next('/login') 强制跳转
})

看上述，看的出来，可以利用如果不满足全局设置条件，然后就重定向（强制跳转）。

卧槽，这个tm的就很简单了，我们之前不是给路由起了别名吗？name ,path属性，我们都能拿到。

案例：看下这个大致了解

//挂载路由导航守卫,控制页面访问权限
router.beforeEach((to, from, next) => {
  if (to.path === '/login') return next();
  //获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})

2.单个路由守卫

1.这接绑定在路由index.js文件内。

2.绑定在路由的.vue文件中。

//通过路由规则，进入该组件时被调用
1. beforeRouteEnter(to,from,next) {
  if(toString.meta.isAuth){
    if(localStorage.getTime('school')==='qinghuadaxue'){
      next()
    }else{
      alert('学校名不对，无权限查看！')
    }
  } else{
    next()
  }
},
//通过路由规则，离开该组件时被调用 
2. beforeRouteLeave(to,from,next) {
 next()
}