Vue的路由钩子

1、全局钩子：

// 导航开始

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

// to: 目标路由对象

// from: 即将进入的路由对象

// next: 进行下一个钩子

})

// 导航结束

afterEach((to, from) => {

})

const router = new VueRouter({})

router.beforeEach()

router.afterEach()

2、局部路由钩子

在路由配置上直接定义beforeEnter和afterEnter钩子

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

3、组件内路由钩子

在组件内定义beforeRouterEnter、beforeRouterUpdate、beforeRouterLeave

const far = {
    template: '...'
    beforeRouterEnter((to, from, next) => {
        //
})
}