1、路由懒加载的实现方式webpack支持amd、commonJS、es6模块语法，所以Vue实现动态路由的方式一共有三种：1、使用AMD规范要求语法constroutes=[{path:'/',name:'Home',component:Home},{path:'/about',name:'About',component:resolve=>require(['../views/About.vue'],resolve)},]该语法不能指定模块名，默认使用webpack配置中的output.chunkFileName。2、使用commonJS规范的require.ensure语法require.ensure()是webpack独有的，已经被import()替代。constroutes=[{path:'/',name:'Home',component:Home},{path:'/about',name:'About',component:resolve=>require.ensure([],()复制代码=>resolve(require('@/'+about+'.vue')),'about')},]这个语法和后面的import语法都可以指定模块名3.使用ES6原生的import语法constroutes=[{path:'/',name:'Home',component:Home},{path:'/about',name:'About',//路由级代码拆分//这会生成一个单独的块（关于.[hash].js)forthisroute//在访问路由时延迟加载。component:()=>import(/*webpackChunkName:"about"*/'../views/About.vue')},]这是vue-cli3默认使用的方法。2、懒加载可能出现的打包问题在以上三种方式中，如果路径参数中包含变量，webpack打包就会出现问题。1、import()会导入组件所在目录下的所有组件。constabout='views/About'constroutes=[{path:'/',name:'Home',component:Home},{path:'/about',name:'About',component:()=>import(/*webpackChunkName:"about"*/`../${about}.vue`)},]这会打包views目录下的所有组件，即使路由中没有任何配置。因此wbepackChunkName指定的文件名也会发生变化，上面的About页面组件会被打包成about1和about2相似的名字。如果后面路由配置中的路径参数也有变量，那么无论你指定什么webpackChunkName，打包出来的都会是第一次import指定的webpackChunkName。例如：constroutes=[{path:'/',name:'Home',component:Home},{path:'/about',name:'About',component:()=>import(/*webpackChunkName:"about"*/`../${about}.vue`)//打包成about2.js},{path:'/test',name:'Test',component:()=>import(/*webpackChunkName:"test"*/`../${test}.vue`)//最后打包成一个类似about3.js的文件名而不是test.js},2.require()和require.ensure将打包所有带有变量的路由组件到一个jslet中Home},{path:'/about',name:'About',组件:resolve=>require(['../'+about+'.vue'],resolve)},{path:'/test',name:'Test',component:resolve=>require(['../'+test+'.vue'],resolve)},about页面组件和test页面组件会被打包到同一个js文件中。所以路径参数中尽量不要带变量。
