What routing guards does vue-router have?

vue-router routing guards include: 1. "Global routing guard" refers to the hook function that operates directly on the routing instance; 2. "Route exclusive guard" refers to the function that can also be configured in a single route The set hook function; 3. "Component guard" refers to the hook function executed within the component.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

What are routing guards?

Official explanation:

"Navigation" indicates that the route is changing. As the name suggests, the navigation guard provided by vue-router is mainly used to guard navigation by jumping or canceling. There are multiple opportunities to build into the route navigation process: globally, exclusive to a single route, or at the component level.

Simply put, navigation guards are some hook functions in the routing jump process. Routing jump is a large process. This large process is divided into small processes such as before, middle and after the jump. There is a function in each process. This function allows you to operate some other things. This is navigation. guard. Similar to the component life cycle hook function

Routing guard classification

1. Global routing guard: refers to the hook function that operates directly on the routing instance , the characteristic is that all routing configured components will be triggered. To put it bluntly, triggering the routing will trigger these hook functions

• beforeEach (to, from, next)

• beforeResolve (to, from, next)

• afterEach (to, from)

2. Route exclusive guard: Refers to the hook function that can also be set when configuring a single route

• beforeEnter (to, from, next)

3. Component guard : refers to the hook function executed within the component, which is similar to the life cycle within the component. It is equivalent to the life cycle hook function added for the component configured with routing.

• beforeRouteEnter (to, from, next)

• beforeRouteUpdate (to, from, next)

• beforeRouteLeave (to, from, next)

(Learning video sharing: vuejs tutorial, web front-end)

The above is the detailed content of What routing guards does vue-router have?. For more information, please follow other related articles on the PHP Chinese website!