vue動態加載組件

這篇文章主要介紹了如何在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',
}