辉太郎看前端(vue中的路由守卫)

前言

• 在路由的跳转的时候，有一些特定的钩子函数会被执行在这些函数中我们可以通过自己的逻辑来改变路由跳转路径。
• 钩子的参数是一个回调函数，回调函数有三个参数
  分别为 to from next
to 即将要进入的目标 路由对象
  from 当前导航正要离开的路由
  next 是否继续执行下一步。
  next() == next(true) 继续执行
  不写next==next(false)终止执行
  next(路由)跳转到某个路由

全局路由守卫

定义在全局，也就是main.js中，语法为：router.beforeEach((to,from,next)=>{}）

router.beforeEach((to,from,next)=>{
  if(to.path=="/detail"){
    if(localStorage.getItem("token")){
      next()
    }else{
      alert('请先登录')
      //next("/login")
    }
  }else{
    next()
  }
})

单个路由守卫(路由独享守卫)

单个路由守卫 写在定义路由规则的时候，也就是在router.js中，语法为：beforeEnter:(to,from,next)=>{//定义自己的规则}。

{
      path: '/index',
      name: 'Index',
      component: Detail,
      beforeEnter: (to, from, next) => {
        if (localStorage.getItem("token")) {
          next()
        } else {
          alert('请先登录')
          //next("/login")
        }
      }
    },

组件内部路由守卫

组件路由守卫是写在每个单独的vue文件里面的路由守卫，有三种状态下的守卫钩子函数：

• 路由进入前调用

beforeRouteEnter (to, from, next) {
// 不能 访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。
next(vm => {})
}

• 路由发生改变时调用

beforeRouteUpdate (to, from, next) {
//当路由参数发生改变的时候被调用 可以用它来监听路由
}

• 离开当前路由时调用

beforeRouteLeave (to, from, next) {
// 离开当前路由页面时调用
}

beforeRouteLeave (to, from , next) {
  const answer = window.confirm('你确定要离开吗？你还有东西没有保存')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

注： 离开守卫beforeRouteLeave：通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

话述

• vue中的路由守卫大体分三种：全局路由守卫，单个组件路由守卫，单个路由守卫。
• 全局路由守卫钩子函数beforeEach()，一般定义于main.js中，做一个全局的统筹。
• 单个路由守卫钩子函数beforeEnter()，定义于路由文件的路由中，只能做到当前页面的守卫，相当于门锁一样，只有你带钥匙才能进入。
• 单个组件内部守卫钩子函数有三种分别是：beforeRouteEnter()，beforeRouteUpdate()，beforeRouteLeave()，分别用在进入前，路由改变时，还有路由离开时，进入前组件实例还未渲染，无法获取this实例，路由改变钩子和路由离开钩子都可以获取到this实例，在路由离开的钩子函数中我们可以查看用户是否有未保存的东西，有的话不能离开当前路由。我们一般使用做多的呢？就是全局路由守卫和单个路由守卫，做登录鉴权的功能。

流程图

总结

初出茅庐，请各位大佬多多关照。🙂