路由守卫

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