Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what is the routing guard of vue-router". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope this article "what is the routing guard of vue-router" can help you solve the problem.

Vue-router routing guards include: 1, "global routing guard", which refers to the hook function operated directly on the routing instance; 2, "routing exclusive guard", which refers to the hook function that can also be set in a single route configuration; and 3, "component guard", which refers to the hook function executed in the component.

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

What is a routing guard?

Official explanation:

Navigation indicates that the route is changing. As the name suggests, the navigation guards provided by vue-router are mainly used to guard navigation by jumping or canceling. There are many opportunities to be implanted in the routing navigation process: global, exclusive to a single route, or component-level.

Simply put, navigation guards are some of the hook functions in the process of route hopping. Route jump is a big process, this big process is divided into before and after the jump and other small processes, in each process there is a function, this function allows you to operate some other things, this is the navigation guard. Similar to component lifecycle hook function

Route guard classification

1. Global routing gatekeeper: it refers to the hook functions that operate directly on the routing instance. The characteristic is that all components of the routing configuration will trigger. The straightforward point is that triggering the route will trigger these hook functions.

BeforeEach (to,from, next)

BeforeResolve (to,from, next)

AfterEach (to,from)

2. Route exclusive guard: refers to a hook function that can also be set when a single route is configured.

BeforeEnter (to,from, next)

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

BeforeRouteEnter (to,from, next)

BeforeRouteUpdate (to,from, next)

BeforeRouteLeave (to,from, next)

This is the end of the content about "what is the routing Guard of vue-router". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.