Vue.js的元件非同步載入的實作方法（程式碼）

這篇文章帶給大家的內容是關於Vue.js的元件非同步載入的實作方法（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

當專案中元件特別多的時候，透過webpack打包的元件非常多，如果在存取其中某一個路由對應的元件時，載入了所有元件的文件，對於效能的消耗是非常浪費的。
此時，我們就需要使用元件非同步載入，也就是進入對應的元件時，只載入核心元件、程式碼和對應的元件程式碼。
透過vue-router和webpack實現
需要外掛程式支援： 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 
    })
}

相關推薦：

#比較簡​​單的非同步加載JS檔案的程式碼_javascript技巧

在vue webpack中如何實作非同步元件載入？

以上是Vue.js的元件非同步載入的實作方法（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！