Vue中怎么使用import進行路由懶加載

這篇文章主要介紹了Vue中怎么使用import進行路由懶加載的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue中怎么使用import進行路由懶加載文章都會有所收獲，下面我們一起來看看吧。

使用import進行路由懶加載的原理

首先我們來說說，import 和 require 的區(qū)別

node 編程中最重要的思想就是模塊化，import 和 require 都是被模塊化所使用。

（1）遵循規(guī)范

• require是 AMD規(guī)范引入方式

• import是es6的一個語法標(biāo)準(zhǔn)，如果要兼容瀏覽器的話必須轉(zhuǎn)化成es5的語法

（2）調(diào)用時間

• require是運行時調(diào)用，所以require理論上可以運用在代碼的任何地方

• import是編譯時調(diào)用，所以必須放在文件開頭

（3）本質(zhì)

• require是賦值過程，其實require的結(jié)果就是對象、數(shù)字、字符串、函數(shù)等，再把require的結(jié)果賦值給某個變量

• import是解構(gòu)過程，但是目前所有的引擎都還沒有實現(xiàn)import，我們在node中使用babel支持ES6，也僅僅是將ES6轉(zhuǎn)碼為ES5再執(zhí)行，import語法會被轉(zhuǎn)碼為require

在路由中，我們?nèi)绾问褂脩屑虞d呢？

export default new VueRouter({
    routes: [
        {
            path: '/',
            component: () => import('../components/Navigator')
        }
    ]
})

使用路由懶加載的寫法，只會在進入當(dāng)前這個路由時候才會走 component ，然后在運行import編譯加載相應(yīng)的組件。

可以理解也是為通過Promise的resolve機制。因為Promise函數(shù)返回的Promise為resolve組件本身，而我們又可以使用import來導(dǎo)入組件。

注意：import會返回一個Promise對象。

setTimeout(() => {
    import('./dynamic-data.js').then(res => {
        console.log(res.default.message)
    })
}, 1500)
// dynamic-data.js
export default {
    message: 'this is message'
}

vue路由懶加載，使用import無法處理

問題原因：import屬于異步引用組件，需要特殊的babel-loader處理

解決

npm i babel-plugin-syntax-dynamic-import -D

在 .bablerc中引入syntax-dynamic-import插件

{
    "presets": ["env"],
    "plugins": ["syntax-dynamic-import"]
}

關(guān)于“Vue中怎么使用import進行路由懶加載”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Vue中怎么使用import進行路由懶加載”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。