vue路由钩子

vue导航守卫

  • 全局路由守卫,例子说明:

router.beforeEach((to, from, next) =>{
  console.log(to, 'this is to')
  console.log(from, 'this is from')
  console.log(next, 'this is next')
})

这样配置后进入初始页面后无法跳转,原因稍后分析,先看打印出来的结果
* to: 表示跳转的目标,包含路由配置的信息,如name, mata, path等
* from: 表示从哪里跳转的,也包括了路由的相关信息。
* next: 用于是否跳转,如果不写,默认不会跳转进入下一个路由地址,也可以在参数中配置跳转的信息,跳转地址等。

  • 因此可知,页面在初始页面,是因为没有使用next让路由进行跳转,直接被拦截下来了。重定向也没法跳转,如果想要跳转,需要在全局路由中使用next()即可。如果判断的时候不合理,经常会导致页面的死循环(主要发生在全局路由守卫的无限跳转)。
  • beforeEach:主要参数为to, from. next, 进入下一个路由前的守卫,可以进行权限判断,状态判断,是否可以跳转还是重定向到登录页面等。
  • afterEach:全局后置钩子,不会接收next函数,进入下一个路由后相关逻辑等可以在这里进行。它触发的时间是早于函数组件被创造的声明周期。
  • 组件内的守卫:beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave三个钩子函数。参数都是to, from, next。
    • beforeRouteEnter:进入组件前执行,早于组件的声明周期,无法调用this,里面的this是undefined,这是由于组件还未创建相关的实例。可以在next中来访问相关实例,如next(x => x//这里的x就是对应的实例)。beforeRouteEnter 是支持给 next 传递回调的唯一守卫
    • beforeRouteUpdate: 当前路由改变,但是组件被复用的时候调用,可以访问this。
    • beforeRouteLeave:这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
  • 独享路由守卫:beforeEnter,再路由配置文件夹中进行定义。
  • 各类路由钩子的顺序:全局beforeEach>独享beforeEnter>组件内beforeRouteEnter>全局afterEach
暂无评论