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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1668
14
1426
52
1328
25
1273
29
1256
24
I encountered the vue-router error 'NavigationDuplicated: Avoided redundant navigation to current location' in my Vue application - how to solve it?
Jun 24, 2023 pm 02:20 PM
The vue-router error "NavigationDuplicated:Avoidedredundantnavigationtocurrentlocation" encountered in the Vue application – how to solve it? Vue.js is becoming more and more popular in front-end application development as a fast and flexible JavaScript framework. VueRouter is a code library of Vue.js used for routing management. However, sometimes
An article that explains Vue routing in detail: vue-router
Sep 01, 2022 pm 07:43 PM
This article will give you a detailed explanation of the Vue-Router in the Vue family bucket, and learn about the relevant knowledge of routing. I hope it will be helpful to you!
Vue and Vue-Router: How to share data between components?
Dec 17, 2023 am 09:17 AM
Vue and Vue-Router: How to share data between components? Introduction: Vue is a popular JavaScript framework for building user interfaces. Vue-Router is Vue's official routing manager, used to implement single-page applications. In Vue applications, components are the basic units for building user interfaces. In many cases we need to share data between different components. This article will introduce some methods to help you achieve data sharing in Vue and Vue-Router, and
How to solve the problem 'Error: Avoided redundant navigation to current location' when using vue-router in Vue application?
Jun 24, 2023 pm 05:39 PM
When using vue-router in a Vue application, the error message "Error: Avoidedredundantnavigationtocurrentlocation" sometimes appears. This error message means "avoiding redundant navigation to the current location" and is usually caused by clicking the same link repeatedly or using the same routing path. So, how to solve this problem? Use the exact modifier when defining the router
Vue-Router: How to use routing meta information to manage routes?
Dec 18, 2023 pm 01:21 PM
Vue-Router: How to use routing meta information to manage routes? Introduction: Vue-Router is the official routing manager of Vue.js, which can help us quickly build single-page applications (SPA). In addition to common routing functions, Vue-Router also supports the use of routing meta information to manage and control routing. Routing metainformation is a custom attribute that can be attached to a route, which can help us implement some special logic or permission control. 1. What is routing metainformation? The routing meta information is
How to solve the problem of 'Error: Invalid route component: xxx' when using vue-router in a Vue application?
Jun 25, 2023 am 11:52 AM
Vue is a popular front-end framework that allows developers to quickly build efficient, reusable web applications. Vue-router is a plug-in in the Vue framework that helps developers easily manage application routing and navigation. However, when using Vue-router, you sometimes encounter a common error: "Error:Invalidroutecomponent:xxx". This article will explain the causes and solutions to this error. The reason lies in Vu
How to solve the problem 'Error: Failed to resolve async component: xxx' when using vue-router in a Vue application?
Jun 24, 2023 pm 06:28 PM
Using vue-router is a common way to implement routing control in Vue applications. However, when using vue-router, the error "Error: Failedtoresolveasynccomponent:xxx" sometimes occurs, which is caused by an asynchronous component loading error. In this article, we will explore this problem and provide solutions. Understand the principle of asynchronous component loading. In Vue, components can be created synchronously or asynchronously.
How to solve the problem 'Uncaught TypeError: Cannot read property 'push' of undefined' when using vue-router in a Vue application?
Aug 18, 2023 pm 09:24 PM
Recently I tried to use vue-router in a Vue application, but encountered a problem: "UncaughtTypeError: Cannotreadproperty'push'ofundefined". What is the cause of this problem and how to solve it? First, let us understand vue-router. vue-router is the official routing management plug-in of Vue.js, which can help us build single-page applications (SPA
