Web Front-end
JS Tutorial
Add loading prompts when lazily loading vue-router to improve user experience
Add loading prompts when lazily loading vue-router to improve user experience
This time I will bring you how to add loading prompts when lazily loading vue-router to improve user experience. What are the precautions? The following are practical cases. , let’s take a look.
Everyone who has used vue-router knows that it can implement lazy loading of module js, that is, only load the js script file of the corresponding module when needed to speed up the display of the homepage. For example, only when a user clicks a "User Information" button or menu for the first time, the js component of the "User Information" module is downloaded.
The implementation of lazy loading relies on the function of AMD mode require function under webpack. Webpack will generate an independent js file from the asynchronous require file. When calling, it will download the js asynchronously and execute it after completion. The key code implemented in the development project is:
const basicInfo = {
path: '/user',
component: resolve => require(['./basicInfo.vue'], resolve)
}
//然后将这个basicInfo加入路由表中But there is a problem here: starting from the user clicking the "User Information" menu, to the completion of js file download , due to downloading from the network js has a time delay, during which the user interface does not respond at all, making users feel that clicking on it is ineffective, and they often click again. This is especially true when the js file is large and the network speed is slow. Therefore, it is necessary to add a Loading loading prompt in this process.
We analyze this line of code:
resolve => require(['./basicInfo.vue'], resolve)
It is a function that executes the require process, and then calls resolvecallback function after it is completed. We only need to encapsulate it, display Loading before require is executed, and then hide Loading when the load is completed and the callback is executed, to achieve this requirement. As follows:
const basicInfo = {
path: '/user',
component: resolve => {
[显示Loading]
require(['./basicInfo.vue'], component => {
[隐藏Loading]
resolve(component)
})
}
};The code for displaying and hiding Loading can be processed according to your own UI framework. For example, element-ui:
import { Loading } from 'element-ui';
var unique;
export default {
show() {
let opt = {body: true, text: 'Loading...'};
if(!unique) unique = Loading.service(opt);
},
resolve(resolve) {
return function (component) {
if (unique) {
unique.close();
unique = null;
}
resolve(component)
}
}
}
const basicInfo = {
path: '/user',
component: resolve => {
spinRoute.show();
require(['./basicInfo.vue'], spinRoute.resolve(resolve))
}
};I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
How to introduce the Tencent verification code function into the Vue project
How does Babel convert the es6 class syntax
How to use vue cli to upgrade webapck4
The above is the detailed content of Add loading prompts when lazily loading vue-router to improve user experience. 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
What should I do if Google Chrome prompts that the content of this tab is being shared?
Mar 13, 2024 pm 05:00 PM
What should I do if Google Chrome prompts that the content of this tab is being shared? When we use Google Chrome to open a new tab, we sometimes encounter a prompt that the content of this tab is being shared. So what is going on? Let this site provide users with a detailed introduction to the problem of Google Chrome prompting that the content of this tab is being shared. Google Chrome prompts that the content of this tab is being shared. Solution: 1. Open Google Chrome. You can see three dots in the upper right corner of the browser "Customize and control Google Chrome". Click the icon with the mouse to change the icon. 2. After clicking, the menu window of Google Chrome will pop up below, and the mouse will move to "More Tools"
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
Try new ringtones and text tones: Experience the latest sound alerts on iPhone in iOS 17
Oct 12, 2023 pm 11:41 PM
In iOS 17, Apple has overhauled its entire selection of ringtones and text tones, offering more than 20 new sounds that can be used for calls, text messages, alarms, and more. Here's how to see them. Many new ringtones are longer and sound more modern than older ringtones. They include arpeggio, broken, canopy, cabin, chirp, dawn, departure, dolop, journey, kettle, mercury, galaxy, quad, radial, scavenger, seedling, shelter, sprinkle, steps, story time , tease, tilt, unfold and valley. Reflection remains the default ringtone option. There are also 10+ new text tones available for incoming text messages, voicemails, incoming mail alerts, reminder alerts, and more. To access new ringtones and text tones, first, make sure your iPhone
How to handle user input checksum prompts in Vue
Oct 15, 2023 am 10:10 AM
How to handle the verification and prompts of user input in Vue. Handling the verification and prompts of user input in Vue is a common requirement in front-end development. This article will introduce some common techniques and specific code examples to help developers better handle user input verification and prompts. Validation using computed properties In Vue, you can use computed properties to monitor and validate user input. You can define a calculated attribute to represent the value entered by the user, and perform validation logic in the calculated attribute. Here is an example: data(){
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!
Baidu Tieba app prompts that the operation is too frequent, what's the matter?
Apr 01, 2024 pm 05:06 PM
Baidu Tieba app prompts that the operation is too frequent. This prompt is usually to maintain the normal operation and user experience of the platform to prevent malicious screen spam, advertising spam and other inappropriate behaviors. For specific handling methods, you can read the tutorial shared by the editor. Baidu Tieba app prompts that the operation is too frequent. Sharing how to deal with it 1. When the system prompts [Operation is too frequent], we need to wait for a while. If you are anxious, you can do something else first. Generally, after waiting for a while, this prompt message will It will disappear automatically and we can use it normally. 2. If after waiting for a long time, it still displays [Operation Too Frequent], we can try to go to Tieba Emergency Bar, Tieba Feedback Bar and other official Tieba, post to report this phenomenon and ask official personnel to solve it. 3.
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 implement global loading effect in Vue
Jun 11, 2023 am 09:05 AM
In front-end development, we often have a scenario where the user needs to wait for the data to be loaded during interaction with the web page. At this time, there is usually a loading effect displayed to remind the user to wait. In the Vue framework, it is not difficult to implement a global loading effect. Let’s introduce how to implement it. Step 1: Create a Vue plug-in We can create a Vue plug-in named loading, which can be referenced in all Vue instances. In the plug-in, we need to implement the following two methods: s
