这篇文章主要介绍了如何在vue项目中按需加载动态组件。

目录结构

1
2
3
4
5
6
7
8
9
// view下有个page1文件夹，其中包含componensts组件和page1.vue，还有map.js存放page1.vue中动态加载componensts组件的映射关系

-view
--page1
---components
----com1
----com2
---page1.vue
---map.js

主文件page1.vue引入组件(常规引入组件)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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引入组件(动态引入组件)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
	<div class="contain">
    	<component :is="curComponent" :ref="curComponentRef"></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] // 组件相对路径
                return () => import(`${p}`) // 动态组件
            }
        }
    }
</script>

组件和标志映射关系文件 map.js

1
2
3
4
export default {
    'key1-info': './components/com1/com1.vue',
    'key2-info': './components/com2/com2.vue',
}