导航钩子函数（导航守卫）？

全局守卫

1. router.beforeEach 全局前置守卫 进入路由之前
2. router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
3. router.afterEach 全局后置钩子 进入路由之后

 

// main.js 入口文件

    import router from './router'; // 引入路由

    router.beforeEach((to, from, next) => {

      next();

    });

    router.beforeResolve((to, from, next) => {

      next();

    });

    router.afterEach((to, from) => {

      console.log('afterEach 全局后置钩子');

    });

路由独享的守卫 你可以在路由配置上直接定义 beforeEnter 守卫

const router = new VueRouter({

  routes: [

    {

      path: '/foo',

      component: Foo,

      beforeEnter: (to, from, next) => {

        // ...

      }

    }

  ]

})

 

组件内的守卫 你可以在路由组件内直接定义以下路由导航守卫 

const Foo = {

  template: `...`,

  beforeRouteEnter (to, from, next) {

    // 在渲染该组件的对应路由被 confirm 前调用

    // 不！能！获取组件实例 `this`

    // 因为当守卫执行前，组件实例还没被创建

  },

  beforeRouteUpdate (to, from, next) {

    // 在当前路由改变，但是该组件被复用时调用

    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，

    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

    // 可以访问组件实例 `this`

  },

  beforeRouteLeave (to, from, next) {

    // 导航离开该组件的对应路由时调用，我们用它来禁止用户离开

    // 可以访问组件实例 `this`

    // 比如还未保存草稿，或者在用户离开前，

    将setInterval销毁，防止离开之后，定时器还在调用。

  }

}