vue-router路由钩子

路由跳转前后，需要做某些操作，这时就可以使用路由钩子来监听路由的变化。

 

接收三个参数：

• to: Route: 即将要进入的目标路由对象
  

• from: Route: 当前导航正要离开的路由

• next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

 

全局路由钩子：(router/index.js 或 main.js)

router.beforeEach((to, from, next) => {
  //会在任意路由跳转前执行，next一定要执行，否则路由不能跳转
  console.log(to,from);
  //
  next();
});
//
router.afterEach((to, from) => {
  //会在任意路由跳转后执行
  console.log('afterEach');
});

单个路由钩子：（router/index.js）
只有beforeEnter，在进入前执行，to参数就是当前路由

routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        //会在当前路由跳转前执行，next一定要执行，否则路由不能跳转
　　　　next();

　　} } ]