路由守卫

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 ) {
 
})

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值