动态加载组件：提升Vue.js应用性能和灵活性

2023-12-25 12:59:03

在Vue.js中，动态加载组件是指在需要时才加载组件，而不是在应用程序启动时加载所有组件。这种方式可以帮助提高应用程序的性能，特别是在组件数量较多时。此外，动态加载组件还可以提高应用程序的灵活性，因为您可以根据需要轻松地添加或删除组件。

使用场景：

项目中需要我们根据不同的业务需求呈现不同的业务场景，如果业务类型简单还好，直接全部引入判断即可，但随着我们代码的沉积，项目将会变得很难维护，这时候我们可以使用动态引入组件的方式来避免这个问。

实现方式：

在入口文件main.js中

import {createRouter, createWebHistory} from 'vue-router';
// 单独写vuex的状态管理
import store from './vuex/store';

const router = createRouter({
    history: createWebHistory(),
    routes:[
        {
            path:'/aa',
            name:'aa',
            component: () => import('./views/aa')
        },
        {
            path:'/bb',
            name:'bb',
            component: () => import('./views/bb')
        },
    ]
})
new Vue({
    router,
    store
}).$mount('#app')

在router.js中

import store from './vuex/store'
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
    state:{

    },
    getter:{

    },
    mutations:{

    },
    actions:{
        async getInfo(){
            let res = await this.$axios.get('/getInfo')
        }
    }
})

在router.js中

import {createRouter, createWebHistory} from 'vue-router';

// 动态引入组件的方式，在需要的时候引入
const router = createRouter({
    history: createWebHistory(),
    routes:[
        {
            path:'/aa',
            name:'aa',
            component: () => import('./views/aa')
        },
        {
            path:'/bb',
            name:'bb',
            component: () => import('./views/bb')
        },
    ]
})

在main.js中

import {createApp} from 'vue'
import store from './vuex/store';
import router from './router'

const app = createApp({})
app.use(store).use(router).mount('#app')

页面

<template>
    <router-view></router-view>
</template>
<script>
    export default {
        name: 'HelloWorld',
        methods: {
            aa(){
                // 动态的获取
                const Index = () => import('./views/aa')
                Index().then((res) => {
                    this.$router.push({path: '/aa'})
                })
            }
        },
    }
</script>