Article directory
51. Routing lazy loading
Official website introduction:
understand
(1) When packaging and building applications, the JS package will become very large, affecting page loading. If we can divide the components corresponding to different routes into different code blocks , and then load the corresponding components when the route is accessed, it will be more efficient
(2) The essence is the application of Vue's asynchronous components on routing components
(3) You need to use dynamic import syntax, that is, the import() function
How to use: configure in src/router/routes.js
original wording
import Home from '@/pages/Home'
{
path: '/home',
component: Home,
meta:{"isShow": true} //自定义元数据属性，判断Footer组件在底部是否显示
},
Routing lazy loading method, no need to introduce components, just write directly behind the component to achieve the effect.
component: () => import('@/pages/Home'),
Links to my other related articles
1. Vue Shangpinhui mall project-day07【44. Personal center secondary routing construction+45. My order+46. Optimize login jump+47. Exclusive guard】
2. Vue Shangpinhui mall project-day07【 vue plugin-48. (understand) image lazy loading plugin]
3. vue Shangpinhui mall project-day07 [vue plugin-49. (understand) custom plugin]
4. vue Shangpinhui mall project-day07 [vue plugin- 50. (Understanding) Form Validation Plugin]
5. Vue Shangpinhui Mall Project-day07【51. Routing lazy loading】
6. Vue Shangpinhui Mall Project-day07【52. Pack files, process map files】
7. vue Shangpinhui mall project-day07【53.nginx reverse proxy configuration】
8. vue Shangpinhui mall project-day07【vue plug-in-54. (understand) generate QR code plug-in】
9. Vue Shangpinhui mall project- day07 [55. Coding test and package release project]