Shulou(Shulou.com)05/31 Report--

This article mainly explains the "for vue-router lazy loading to add loading tips to avoid unresponsive how to solve", the article explained the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "for vue-router lazy loading to add loading tips to avoid unresponsive how to solve" it!

Anyone who has used vue-router knows that it can achieve lazy loading of the module js, that is, only when needed to load the corresponding module js script file, in order to speed up the display of the home page. For example, the js component of the user Information module is downloaded only the first time the user clicks a user Information button or menu.

The implementation of lazy loading depends on the function of require function in AMD mode under webpack. Webpack generates a separate js file from the file of the asynchronous require, downloads the js asynchronously when called and executes it when it is finished. The key code implemented in the development project is:

Const basicInfo = {path:'/ user', component: resolve = > require (['. / basicInfo.vue'], resolve)} / / then add this basicInfo to the routing table

But there is a problem here: from the time the user clicks on the "user Information" menu to the end of the download of the js file, due to a delay in downloading js from the network, the user interface is unresponsive, making the user feel ineffective and often click again. Especially when the js file is large and the network speed is slow. Therefore, it is necessary to add a load prompt for Loading in this process.

We analyze this line of code:

Resolve = > require (['. / basicInfo.vue'], resolve)

It is a function that executes the process of require, and then calls the resolve callback function when it is finished. We just need to encapsulate it, show the Loading before the require executes, and then hide the Loading when the load finishes executing the callback, and we'll implement this requirement. As follows:

Const basicInfo = {path:'/ user', component: resolve = > {[Show Loading] require (['. / basicInfo.vue'], component = > {[hide Loading] resolve (component)})}}

To show and hide Loading code, you can handle it 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))}}

The above is passed in vue-router 2.3.1.

Thank you for your reading, the above is "for vue-router lazy loading to add loading tips to avoid unresponsive how to solve" the content, after the study of this article, I believe that for vue-router lazy loading when adding loading tips to avoid unresponsive how to solve this problem has a more profound experience, the specific use of cases also need to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.