vue,uniapp 路由守卫


在vue,uniap等项目中,路由守卫和接口拦截一样是必不可缺少的一部分功能;

路由守卫分为 router.beforeEach(全局前置路由守卫)和 router.afterEach(全局后置路由守卫);

全局前置路由守卫有三个参数:

  1. to:将要跳转到的路由页面;
  2. from:从哪个路由页面离开;
  3. next: 一定要调用该方法来resolve这个钩子,将要执行什么样的操作,可以用这个方法来调用;
  • next(false)为中断当前路由跳转;
  • next('/')或者next({ path: '/'}): 跳转到一个不同的地址,或者你指定的页面,当前导航被中断了,然后进行一个新的导航。你可以向next传递位置对象,且允许设置为 replace:true、name:'home'之类的选项以及 任何用在router-link的to prop或者router.push中的选项。
  • next(error): 如果传入next的参数是一个error实例,则导航会被终止且该错误会被传递给router.onError注册过的回调。

确保next函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次,但是只能在所有的逻辑路径都不重叠的情况下,否则钩子永远都不会被解析或报错。

router.beforeEach((to,from,next) => {
  if(...某某条件下){
    next({name: 'login'})
  }
  next()   //在执行某某条件下next,后下面也会执行,这样为调用两次
})

后置钩子则就比较简单了,两个参数:to、from;
参数跟路由守卫前置钩子的参数相同 ↑;
//然后路由跳转之后需要执行什么事件,有你判断;


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM