vue路由加懶載入的方式

2021-09-25 07:37:24 字數 593 閱讀 9585

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路由懶載入

import vue from vue import vuerouter from vue router vue.use vuerouter var router new vuerouter routes name 登陸 path component resolve require.ensure r...

vue路由懶載入

方法一 resolve 這一種方法較常見。它主要是使用了resolve的非同步機制,用require代替了import,實現按需載入,下面是 示例 import vue from vue import router from vue router import helloworld from com...

Vue路由懶載入

常用的懶載入方式有兩種 即使用vue非同步元件和es中的import 未使用懶載入 import vue from vue import router from vue router import helloworld from components helloworld 未用懶載入 vue.use...