Implementation method of asynchronous loading of components in Vue.js (code)

The content of this article is about the implementation method (code) of asynchronous loading of components in Vue.js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

When there are many components in the project, there are many components packaged by webpack. If the files of all components are loaded when accessing the component corresponding to one of the routes, it will be very wasteful in terms of performance consumption. .
At this time, we need to use component asynchronous loading , that is, when enters the corresponding component, only the core components, code and corresponding component code are loaded.
Achieved through vue-router and webpack
Requires plug-in support: babel-plugin-syntax-dynamic-import

import Vue from 'vue'import VueRouter from 'vue-router'
// 这里不在提前引入所有需要的组件，而是在路由配置项的component中按需引入即可
// import login from ('../components/login/login.vue')
// import homePagefrom ('../components/login/homePage.vue')
const homePage= () => {
    import('../components/home/homePage.vue')
}
Vue.use(VueRouter)const route = [
    {
            path: '/login',        
            name: "登陆",        
            // 当该路由被调用时，再去请求对应的组件内容        
            component: () => import('../components/login/login.vue')
    },
    {
            path: '/homePage/:id',        
            name: "首页",        
            // 当该路由被调用时，再去请求对应的组件内容        
            component: () => import('../components/home/homePage.vue')
    }
]export default () => {
    return new VueRouter ({
        route 
    })
}

Related recommendations:

Relatively simple asynchronous loading Code of JS files_javascript skills

How to implement asynchronous component loading in vue webpack?

The above is the detailed content of Implementation method of asynchronous loading of components in Vue.js (code). For more information, please follow other related articles on the PHP Chinese website!