Using routing and hook functions in Vue2.X
Below I will share with you a detailed explanation of routing and hook functions based on Vue2.X. It has a good reference value and I hope it will be helpful to everyone.
I’ve been a little busy at work recently. I haven’t updated my articles for a long time, and I haven’t learned anything new.
Let’s talk about this routing hook today.
Navigation and hook functions:
Navigation: routing is changing Keywords: routing changes
Hook function: in Different node functions are called at different stages of route switching (in my opinion, the hook function is: a function triggered by a certain node and timing).
The hook function is mainly used to intercept the navigation, let it complete the jump or cancel, and execute different functions at different stages of the navigation. Finally, the execution result of the hook function will tell the navigation what to do. .
The navigation is waiting until all hooks are resolved, waiting for the hook function to tell it what to do next. Use next() to specify.
Let me give you an example of login
router.beforeEach(({meta, path}, from, next) => {
const {auth = true} = meta // meta代表的是to中的meta对象，path代表的是to中的path对象
var isLogin = Boolean(store.state.user.id) // true用户已登录， false用户未登录
if (auth && !isLogin && path !== '/login') { // auth 代表需要通过用户身份验证，默认为true，代表需要被验证， false为不用检验
return next({ path: '/login' }) // 跳转到login页面
}
next() // 进行下一个钩子函数
})Let’s talk about the beforeEach hook function first, it is a global before hook function , (before each) means that it must be executed every time every route changes.
Its three parameters:
to: (Route routing object) The target routing object that is about to enter Attributes under the to object: path params query hash fullPath matched name meta (under matched, but this example can be used directly)
from: (Route routing object) The current navigation is about to leave The route
next: (Function function) must call this method to resolve this hook. Calling method: next (parameter or empty) ***Must call
next (without parameters): Carry out the next hook in the pipeline. If you reach the last hook function, the navigation status is confirmed (Confirmed)
next('/') or next({ path: '/' }): Jump to a different address. The current navigation is interrupted and a new navigation is started.
The global afterEach hook of the global hook function:
after hook has no next method and cannot change the navigation. It means that the navigation has been determined. After execution, there is an attached execution hook function
Hook function in the component: (beforeRouteEnter and beforeRouteLeave plus a watch function)
In the vue2.X component The hook function is much smaller than vue1.X. .
Use the component's own life cycle hook function to replace activate and deactivate
Use a watcher on $router to respond to routing changes
canActivate can be used by beforeEnter in the router configuration The implementation of
canDeactivate has been replaced by beforeRouteLeave, which is specified in the root-level definition of a component. This hook function is called with the component instance as its context.
canReuse has been removed because it was confusing and rarely used.
Use ajax to get the data data(to, from, next) hook and use beforeRouteEnter (to, from, next) in the component instead
The above is what I compiled for everyone, I hope it will be used in the future Helpful to everyone.
Related articles:
Cross-domain issues with proxyTable in the vue-cli project
How to use refs in React components
Detailed explanation of using devtool in webpack
The above is the detailed content of Using routing and hook functions in Vue2.X. 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
3 Ways to Fix Router Lost Contact with NTP Time Server Error
May 22, 2023 pm 03:43 PM
Connection and WiFi issues can be very frustrating and significantly reduce productivity. Computers use Network Time Protocol (NTP) for clock synchronization. In most cases, if not all, your laptop uses NTP to track time. If your server has lost contact due to NTP time server error message, read this article to the end to learn how to fix it. What happens when the router's time is set incorrectly? Router performance is generally not affected by incorrect time settings, so your connection may not be affected. However, some problems may arise. These include: Incorrect time for all gadgets that use the router as a local time server. The timestamps in the router log data will be wrong. if due to
How to implement API routing in the Slim framework
Aug 02, 2023 pm 05:13 PM
How to implement API routing in the Slim framework Slim is a lightweight PHP micro-framework that provides a simple and flexible way to build web applications. One of the main features is the implementation of API routing, allowing us to map different requests to corresponding handlers. This article will introduce how to implement API routing in the Slim framework and provide some code examples. First, we need to install the Slim framework. The latest version of Slim can be installed through Composer. Open a terminal and
How to use PHP hook functions?
Apr 16, 2024 pm 01:15 PM
PHP hook functions allow you to add custom code in response to specific events. By using the add_filter() or add_action() function, you can execute code when the filter hook or action hook fires respectively. For example, use the filter hook the_title to modify the page title before it is displayed.
Java Apache Camel: Building a flexible and efficient service-oriented architecture
Feb 19, 2024 pm 04:12 PM
Apache Camel is an Enterprise Service Bus (ESB)-based integration framework that can easily integrate disparate applications, services, and data sources to automate complex business processes. ApacheCamel uses route-based configuration to easily define and manage integration processes. Key features of ApacheCamel include: Flexibility: ApacheCamel can be easily integrated with a variety of applications, services, and data sources. It supports multiple protocols, including HTTP, JMS, SOAP, FTP, etc. Efficiency: ApacheCamel is very efficient, it can handle a large number of messages. It uses an asynchronous messaging mechanism, which improves performance. Expandable
How to use routing in ThinkPHP6
Jun 20, 2023 pm 07:54 PM
ThinkPHP6 is a powerful PHP framework with convenient routing functions that can easily implement URL routing configuration; at the same time, ThinkPHP6 also supports a variety of routing modes, such as GET, POST, PUT, DELETE, etc. This article will introduce how to use ThinkPHP6 for routing configuration. 1. ThinkPHP6 routing mode GET method: The GET method is a method used to obtain data and is often used for page display. In ThinkPHP6, you can use the following
How to use routing to customize page switching animation effects in a Vue project?
Jul 21, 2023 pm 02:37 PM
How to use routing to customize page switching animation effects in a Vue project? Introduction: In the Vue project, routing is one of the functions we often use. Switching between pages can be achieved through routing, providing a good user experience. In order to make page switching more vivid, we can achieve it by customizing animation effects. This article will introduce how to use routing to customize the page switching animation effect in the Vue project. Create a Vue project First, we need to create a Vue project. You can use VueCLI to quickly build
Implementation method and experience summary of flexibly configuring routing rules in PHP
Oct 15, 2023 pm 03:43 PM
Implementation method and experience summary of flexible configuration of routing rules in PHP Introduction: In Web development, routing rules are a very important part, which determines the corresponding relationship between URL and specific PHP scripts. In the traditional development method, we usually configure various URL rules in the routing file, and then map the URL to the corresponding script path. However, as the complexity of the project increases and business requirements change, it will become very cumbersome and inflexible if each URL needs to be configured manually. So, how to implement in PHP
Use JavaScript functions to implement web page navigation and routing
Nov 04, 2023 am 09:46 AM
In modern web applications, implementing web page navigation and routing is a very important part. Using JavaScript functions to implement this function can make our web applications more flexible, scalable and user-friendly. This article will introduce how to use JavaScript functions to implement web page navigation and routing, and provide specific code examples. Implementing web page navigation For a web application, web page navigation is the most frequently operated part by users. When a user clicks on the page
