各位朋友 因 最近工作繁忙，小編停更了一段時間，快過年了，小編祝願 大家 事業有成 學業有成 快樂健康 2020開心過好每一天。從今天開始 我會抽時間把 Vue 的知識點補充完整，以及後期會帶給大家更完善的知識體系！！！ 路由的按需載入(懶載入) 我們都知道 vue的路由是我們必學的，也是不可分離的 ...
各位朋友 因 最近工作繁忙，小編停更了一段時間，快過年了，小編祝願 大家 事業有成 學業有成 快樂健康 2020開心過好每一天。從今天開始 我會抽時間把 Vue 的知識點補充完整，以及後期會帶給大家更完善的知識體系！！！
路由的按需載入(懶載入)
我們都知道 vue的路由是我們必學的，也是不可分離的一部分，我們傳統引入路由的方式是這樣的，
import Home from '@/components/home/Home'
但是在真正項目的開發中，這種現象是杜絕的，是不建議使用這種傳統方式引入的。
為什麼不建議使用呢？
比如你當前有三個路由需要引入，會把這三個組件的js代碼放在一個js文件中，導致打開其中一個頁面，會把其它js代碼也載入下來，這樣是非常不好的，當項目很大會影響性能。
我們要使用路由懶載入
比如打開 home 組件只載入home組件的js，不載入其它組件，css沒有問題因為 style標簽有個 scoped，只針對私有的。
常用的路由懶載入有兩種
1. 使用 Vue非同步組件 和 Es中的 import
2. Vue 非同步組件實現懶載入
方法如下：component：resolve=>(require(['需要載入的路由的地址'])，resolve)
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: resolve=>(require(["@/components/HelloWorld"],resolve))
}
]
})
3. ES 提出的 import
方法如下：const / let HelloWorld = （）=>import('需要載入的模塊地址')
（不加 { } ，表示直接return）
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const / let HelloWorld = ()=>import("@/components/HelloWorld")
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:HelloWorld
}
]
})
作者：晉飛翔
手機號(微信同步)：17812718961
希望本篇文章 能給正在學習 前端的朋友 或 以及工作的朋友 帶來收穫 不喜勿噴 如有建議 多多提議 謝謝！
import Home from '@/components/home/Home'
