Vue 路由钩子

路由钩子主要作用是拦截导航，让他完成跳转或者取消跳转。比如登录界面输入了账号、密码，主界面需要展示账号，但是你没有把 “账号” 这个字段保存到 vuex 或者 session 里面，直接跳转会导致主界面显示空白，这个时候你就需要一个 beforeRouteLeave 路由钩子，还没有数据的情况下，禁止界面跳转，举例子（伪代码）：

beforeRouteLeave(to,from,next){
  if('account' === ' '){
      next(false);
  }else{
    next();
  };
};

大概就是这么个意思，参数 to ——是要跳转到的界面，from —— 从哪个界面离开，next() —— 是否允许跳转，如果是 next(false) ——禁止跳转，next({name:LOGIN}) —— 跳转到登录界面（需要自己手动配置路由），next() 或者 next(true) ——允许跳转。

路由钩子的主要实现方式有三种

1. 全局实现

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

var routes = [{
  path:'/route1',
  name:'route1',
  component:() = > import('./index.vue')  //调用的时候再开始加载
}]
 const router = new VueRouter({ 
    routes；
  })
router.beforeEach((to, from, next) => {
  next(false);
})

1.2 全局的 after 钩子，（after 钩子没有 next 方法，不能改变导航）

2. 路由独享

2.1 配置路由的时候可以直接增加 beforeEnter，功能类似 before。

var routes = [{
  path:'/route1',
  name:'route1',
  component:() = > import('./index.vue')  //调用的时候再开始加载
  beforeEnter: (to, from, next) => {
       next();
  }

}]

3. 组件内实现的钩子

3.1 beforeRouteEnter
在导航确认之前调用，新组件的 beforeCreate 之前调用，所以特别注意它的 this 是 undefined

3.2 beforeRouteUpdate

用法：点击更新二级导航时调用。

3.3 beforeRouteLeave
离开当前界面之前调用，用法：1. 需要的保存或者删除的数据没有完成当前操作等等原因，禁止界面跳转。