这篇文章主要介绍了如何在vue项目中按需加载动态组件。
目录结构 // view下有个page1文件夹，其中包含componensts组件和page1.vue，还有map.js存放page1.vue中动态加载componensts组件的映射关系- view-- page1--- components---- com1---- com2--- page1.vue--- map.js 主文件page1.vue引入组件(常规引入组件) <template><div class="contain"> <Com1 ref="com1Ref"></Com1> <Com2 ref="com2Ref"></Com1> </div></template><script>import Com1 from './components/com1' import Com2 from './components/com2' export default { name: 'Page1', components: { Com1, Com2 } }</script> 主文件page1.vue引入组件(动态引入组件) <template><div class="contain"> <component :is="curComponent[0]" :ref="curComponent[1]"></component> </div></template><script>// 注意这里不再直接引入组件，而是引入映射关系 import map from './components/map.js' export default { name: 'Page1', data() { return { key: '', //这里的key用于区分不同的组件,只需动态变化key值，对应的组件由计算属性自动引入 } }, computed: { curComponent() { let k = this.key + 'info' // 组件映射关系标志 let p = map[k] // 组件相对路径 let c = () => import(`${p}`) // 动态组件 let r = this.key + 'Ref' // ref return [c, r] } } }</script> 组件和标志映射关系文件 map.js export default { 'key1-info': './components/com1/com1.vue', 'key2-info': './components/com2/com2.vue',}