路由守卫

1、路由导航流程解析

路由导航开始 : 在当前路由调用beforeRouterLeave   - >  调用beforeEach 

在重用组件中  :   调用beforeRouteUpdate   - > 调用beforeEnter

解析异步路由组件 : 在被激活的路由组件里调用beforeRouteEnter - > 调用beforeResolve 

导航被确认 : 触发DOM更新

用创建好的实例调用beforeRouteEnter中传递给next的函数

2、路由守卫为:

全局守卫:beforeEach

后置守卫:afterEach

全局解析守卫:beforeResolve

路由独享守卫:beforeEnter

组内路由守卫:beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave

router.js


// 1.全局路由前置卫士, 在路由导航触发之后执行,异步解析,在守卫resolve之前,导航一直处于等待的过程  用的较多
router.beforeEach(function (to, from, next) {
  
  if(to.path === '/home' || to.path === '/detail/1' || to.path === '/detail/2'){
    next()  // resolve状态为confirmed,进行路由跳转,如果不调用则不跳转
  }else if(from.meta.isLogin){
    next()  // 确定用户名
  }else {
    next(false) // 不跳转路由
  }
})
// 设置多个钩子函数
router.beforeEach(function (to, from, next) {
  next();  // 上一个钩子函数必须要调用next() 此处才执行,类似于node中的next() 区别是nodejs中返回的是res.send()
})


// 2. 全局解析守卫router.beforeResolve(v 2.5+)

router.beforeResolve(function (to, from, next) {
  next()
})

// 3. 全局后置守卫 用的较少
router.afterEach(function (to, from ) {
 
})

你可能感兴趣的:(vue)