未使用懶加載
|
1
2
3
4
5
6
7
8
9
10
11
12
|
import Vue from 'vue';import Router from 'vue-router';import HelloWorld from '@components/HelloWorld';Vue.use(Router);export default new Router({routes:[ {path:'./', name:'HelloWorld', component:HelloWorld }]}) |
vue異步組件
component:resolve=>{reuqire([‘需要加載的路由地址']),resolve)
|
1
2
3
4
5
6
7
8
9
10
11
12
|
import Vue from 'vue';import Router from 'vue-router';const HelloWorld=resolve=>{require(["@/components/HelloWorld"],resolve}Vue.use(Router);export default new Router({routes:[ {path:'./', name:'HelloWorld', component:HelloWorld }]}) |
ES6的import()
|
1
2
3
4
5
6
7
8
9
10
11
12
|
import Vue from 'vue';import Router from 'vue-router';import HelloWorld=()=>import('@/components/HelloWorld');Vue.use('Router')export default new Router({ routes:[{ {path:'./', name:'HelloWorld', component:HelloWorld } }]}) |
webpack的require.ensure()
require.ensure可實現按需加載資源，包括js,css等。他會給里面require的文件單獨打包，不會和主文件打包在一起。
第一個參數是數組，表明第二個參數里需要依賴的模塊，這些會提前加載。
第二個是回調函數,在這個回調函數里面require的文件會被單獨打包成一個chunk,不會和主文件打包在一起，這樣就生成了兩個chunk,第一次加載時只加載主文件。
第三個參數是錯誤回調。
第四個參數是單獨打包的chunk的文件名
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
import Vue from 'vue';import Router from 'vue-router';const HelloWorld=resolve=>{ require.ensure(['@/components/HelloWorld'],()=>{ resolve(require('@/components/HelloWorld')) }) }Vue.use('Router')export default new Router({ routes:[{ {path:'./', name:'HelloWorld', component:HelloWorld } }]}) |
總結
到此這篇關于vue-router懶加載的3種方式的文章就介紹到這了,更多相關vue-router懶加載內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/qq_41998083/article/details/109726402
