vue路由懶載入的兩種方式

2021-10-08 09:29:26 字數 537 閱讀 1535

1、當乙個vue專案很大的時候,對於一些「暫時」用不到的元件,我們可以不進行載入,等到用到次元件時再載入。這樣可以優化spa應用首次載入白屏情況,也給使用者更好的體驗。這樣就是vue路由懶載入。

2、常用的懶載入方式有兩種:即使用 es中的import  和 vue非同步元件 

2.1 未使用懶載入

import helloworld from '@/components/helloworld'

export default new router(]})

2.2  使用es中的import進行懶載入  (推薦使用,也是最常用的)

const helloworld = () => import("@/components/helloworld");

export default new router(]

})/*或者*/

export default new router(]

})2.3  使用vue中的非同步元件進行懶載入

export default new router(

}]})

vue路由懶載入 按需載入的兩種方式

當專案過大時,我們可以使用按需載入來減少首屏載入的時間,避免白屏 等待時間過長等問題。常用的懶載入方式有兩種 1.vue的非同步元件 const routes export default new vuerouter 這樣每乙個路由元件都被分割成了單獨乙個js檔案,切換路由時按需載入 2.結合es6...

VUE路由懶載入的3種方式

匯入vue import vue from vue 匯入路由 import router from vue router 匯入登入元件 import login from components login login 匯入home元件 import home from components home...

vue路由加懶載入的方式

1 當乙個vue專案很大的時候,對於一些 暫時 用不到的元件,我們可以不進行載入,等到用到次元件時再載入。這樣可以優化spa應用首次載入白屏情況,也給使用者更好的體驗。這樣就是vue路由懶載入。2 常用的懶載入方式有兩種 即使用 es中的import 和 vue非同步元件 2.1 未使用懶載入 im...