Route lazy loading in VUE

Why route lazy loading

1. When packaging to build applications, the packaged code logic implementation package can be very large. 2. It is more efficient to package the components corresponding to different routes and load them when they are accessed.

Route lazy load is doing something

1. Load the components corresponding to the route into corresponding JS packages. 2. Load the corresponding component only when the route is accessed.

How to use route lazy loading

Routes :[// not used routes:[// used {{path:'/ imgDetail', path:'/imgDeatail', name: 'imgDetail', name::'imgDetail', component: ImgDetail Component :()=>import('../components/imgDetail')},},]] Or use the declaration of the first route, but reference it outside the function:  const imgDetail = ()=> import('./components/imgDetail')Copy the code