Vue Router navigation guard---navigation analysis process

1. Navigation is triggered;

2. Call beforeRouterLeave in the deactivated component;

3. Call the global pre-beforeEacth guard;

4. Call beforeRouterUpdate in the reused component;

5. Call the beforeEnter guard in the routing configuration;

6. Parse asynchronous routing components;

7. Call the beforeRouterEnter guard in the activated component;

8. Call the global resolution beforeResolve guard;

9. Confirm navigation;

10. Call the global afterEach hook;

11. make the DOM update;

12. Call the callback function passed to next by beforeRouterLeave, and pass in the created component instance as a parameter of the callback function;