路由导航守卫 （路由钩子函数）

一 全局

1.全局前置守卫 路由跳转之前触发

2.全局后置守卫    路由跳转完成后触发

全局路由守卫有个两个：一个是全局前置守卫，一个是全局后置守卫 ，钩子函数按执行顺序包括beforeEach、beforeResolve、afterEach三个。

router.beforeEach((to, from, next) => {
  console.log(to) => // 到哪个页面去？
  console.log(from) => // 从哪个页面来？
  next() => // 一个回调函数
}
router.afterEach（to，from） = {}

二、组件内路由守卫

beforeRouteEnter  : 路由进入之前

路由进入之前调用，参数包括to，from，next。该钩子函数在全局守卫beforeEach和独享守卫beforeEnter之后，全局beforeResolve和全局afterEach之前调用。

beforeRouteUpdate : 子路由变化，或者路由参数更新、

在当前路由改变时，并且该组件被复用时调用，可以通过this访问实例。参数包括to，from，next。当前路由query变更时，该守卫会被调用

beforeRouteLeave ：路由离开之前

导航离开该组件的对应路由时调用，可以访问组件实例this，参数包括to，from，next。

beforeRouteEnter (to, from, next) {
  // 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
  next(vm => {})
}
beforeRouteUpdate (to, from, next) {
  // 同一页面，刷新不同数据时调用，
}
beforeRouteLeave (to, from, next) {
  // 离开当前路由页面时调用
}

三、独享守卫   写在路由配置项中

[beforeEnter]：和beforeEach完全相同，如果都设置则在beforeEach之后紧随执行，参数to、from、next

export default new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: 'Home',
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

四、路由守卫 结合 vuex相关问题

因为在  某些路由守卫中 无法访问 this  所以也就无法访问 this.$store

解决： 可以在使用vuex时 引入store/index.js 之后就可以使用了