溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue如何實現路由懶加載

發布時間:2022-03-11 11:17:06 來源:億速云 閱讀:252 作者:小新 欄目:開發技術

小編給大家分享一下vue如何實現路由懶加載,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

路由懶加載

我們知道 Vue 是單頁應用,所以如果沒有用懶加載,就會導致進入首頁時需要加載的內容過多,時間過長,就會出現長時間的白屏,很不利于用戶體驗,SEO 也不友好

所以可以去用懶加載將頁面進行劃分,需要的時候才加載對應的頁面,以分擔首頁的加載壓力,減少首頁加載時間

沒有用路由懶加載:

import Home from '@/components/Home'
const router = new VueRouter({  
 routes: [  
  { path: '/home', component: Home }
]
})

用了路由懶加載:

const router = new VueRouter({
routes: [ 
 { path: '/home', component: () => 
import('@/components/Home') }, 
 { path: '/login', component: 
require('@/components/Home').default }
]
})

在進入這個路由的時候才會走對應的 component,然后運行 import 編譯加載組件,可以理解為 Promise 的 resolve 機制

  • import:Es6語法規范、編譯時調用、是解構過程、不支持變量函數等

  • require:AMD規范、運行時調用、是賦值過程,支持變量計算函數等

以上是“vue如何實現路由懶加載”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

vue
AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女