详解VueRouter进阶之导航钩子和路由元信息

导航钩子

vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。

全局钩子

你可以使用 router.beforeEach 注册一个全局的 before 钩子：

const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ...})

当一个导航触发时，全局的 before 钩子按照创建顺序调用。钩子是异步解析执行，此时导航在所有钩子 resolve 完之前一直处于 等待中。

每个钩子方法接收三个参数：

确保要调用 next 方法，否则钩子就不会被 resolved。

同样可以注册一个全局的 after 钩子，不过它不像 before 钩子那样，after 钩子没有 next 方法，不能改变导航：

router.afterEach(route => { // ...})

你可以在路由配置上直接定义 beforeEnter 钩子：

const router = new VueRouter({ routes: [  {   path: '/foo',   component: Foo,   beforeEnter: (to, from, next) => {    // ...   }  } ]})

这些钩子与全局 before 钩子的方法参数是一样的。

组件内的钩子

最后，你可以在路由组件内直接定义以下路由导航钩子：

beforeRouteEnterbeforeRouteUpdate (2.2 新增)beforeRouteLeaveconst 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` }}

beforeRouteEnter 钩子 不能 访问 this，因为钩子在导航确认前被调用,因此即将登场的新组件还没被创建。