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

Editor to share with you how to achieve vue routing lazy loading, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

Routing lazy loading

We know that Vue is a single-page application, so if we do not use lazy loading, it will lead to too much content to load when entering the home page, and if the time is too long, the white screen will appear for a long time, which is not conducive to the user experience, and SEO is not friendly.

So you can use lazy loading to divide the page and load the corresponding page when needed, so as to share the loading pressure of the home page and reduce the loading time of the home page.

No route lazy loading:

Import Home from'@ / components/Home'const router = new VueRouter ({routes: [{path:'/ home', component: Home}]})

Routing lazy loading is used:

Const router = new VueRouter ({routes: [{path:'/ home', component: () = > import ('@ / components/Home')}, {path:'/ login', component: require ('@ / components/Home') .default}]})

When entering this route, it will take the corresponding component, and then run import to compile and load the component, which can be understood as the resolve mechanism of Promise.

Import:Es6 syntax specification, compile-time calls, is a deconstruction process, does not support variable functions, etc.

Require:AMD specification, runtime calls, is an assignment process, supports variable calculation functions, etc.

The above is all the contents of the article "how to achieve routing lazy loading in vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.