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

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

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

首先我們來說說，import 和 require 的區別

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

（1）遵循規范

• require是 AMD規范引入方式

• import是es6的一個語法標準，如果要兼容瀏覽器的話必須轉化成es5的語法

（2）調用時間

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

• import是編譯時調用，所以必須放在文件開頭

（3）本質

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

• import是解構過程，但是目前所有的引擎都還沒有實現import，我們在node中使用babel支持ES6，也僅僅是將ES6轉碼為ES5再執行，import語法會被轉碼為require

在路由中，我們如何使用懶加載呢？

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

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

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

注意：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"]
}

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