（十五）导航守卫

// 导航刚触发、组件还没有加载，且导航发生实际跳转之前
router.beforeEach((to, form) => {
  console.log('全局路由守卫')
})

// 导航守卫执行完毕，且组件加载完成，组件中的导航守卫执行完毕之后，且导航实际跳转前执行
router.beforeResolve((to) => {
  if(to.path.startsWith('blogs')) {
    console.log('用户已经登录')
  }
})

// 导航确认并实际跳转之后执 - 可以操作 DOM 可以进行埋点统计数据，可以创建多个他们会按照顺序执行
router.afterEach((to) => {
  document.title = to.path
})

const routers = [
  {
    path: '/blog',
    component: BlogListPage,
    // 进入对应的路由时，页面实际跳转前
    beforeEnter: (to from) => {
      console.log('按路由配置')
    }
  }
]

export default {
  // 导航跳转时，组件创建前
  beforeRouteEnter(to, from ) {}
  // 导航跳转时，且复用组件时
  beforeRouteUpdate(ro, from) {}
  // 在页面即将跳转之前，用来提示用户有未 保存的数据
  beforeRouteLeave(to, from) {}
}

to: 导航要跳转到的路由对象
from: 导航跳转前的当前路由对象

// 如果到行守卫返回 false 会阻止导航的跳转,如果导航没有返回，或者是返回undefined等就会继续执行
router.beforeEach((to, from) => {
  if(true) {
    return false
  } else {
    // 或者也可以返回一个路由导航对象
    return {
      name: 'blogs'
    }
  }
})

// @4已经不推荐使用了 next()，除非在非必要的时候，还需要注意的是，使用 next() 参数就必须调用，使用了 next() 就不能使用 return了