Global routing hook

1.router.beforeEach: Before entering the route

router.beforeEach((to, from, next) = > { 
  next();
});
Copy the code

To: indicates the destination route object to be entered

From: The route object that the current navigation is leaving

Next: Jumps to a new route. The current navigation is interrupted and a new navigation is restarted.

  • Next (): Goes to the next hook in the pipe. If all hooks are executed, then the navigation state is confirmed.

  • Jump: next (‘ path address) or next ({path: “‘}) or next ({name:”})

  • Next (false): interrupts current navigation.

2,router.beforeResolve: Global parsing guard

Called after beforeRouteEnter

router.beforeResolve((to, from,next) = > { 
  next();
});
Copy the code

3,router.afterEach: After the route is entered

router.afterEach((to, from) = >{});Copy the code

Exclusive routing hooks

The call order follows the global front-guard beforeEach

{
  path: '/home'.beforeEnter: (to, from, next) = >{ next(); }}Copy the code

Routing hooks in components

1.beforeRouteEnter : Before entering the route

Call order after exclusive routing guard beforeEnter, no! Can!!!! Returns component instance this, which can be accessed by passing a callback to Next after Mounted

beforeRouteEnter ((to, from, next) = > { 
  next(vm= >{
      // Access component instances through 'VM'
      console.log("vm",vm);
  });
});
Copy the code

2,beforeRouteUpdate ：

This hook is called when the current route changes but the component is being reused (the route is being reused for the same component), and this hook is called in that case. You can access the component instance this

beforeRouteUpdate ((to, from, next) = > { 
  next();
});
Copy the code

3,beforeRouteLeave: Indicates that the route leaves

Called when navigating away from the corresponding route of the component, which can be accessed by the component instance this

beforeRouteLeave((to, from, next) = > { 
  next();
});
Copy the code

Route navigation parsing process

  1. Navigation is triggered.
  2. Called in a deactivated componentbeforeRouteLeaveThe guards.
  3. Call globalbeforeEachThe guards.
  4. Called in a reused componentbeforeRouteUpdateGuard (+ 2.2).
  5. Called in the routing configurationbeforeEnter.
  6. Parse the asynchronous routing component.
  7. Called in the active componentbeforeRouteEnter.
  8. Call globalbeforeResolveGuard (+ 2.5).
  9. Navigation confirmed.
  10. Call globalafterEachHook.
  11. Triggering DOM updates (mounted).
  12. callbeforeRouteEnterThe created component instance is passed in as an argument to the callback function passed to Next in the guard.