vue router按需載入

2022-09-16 05:54:11 字數 2524 閱讀 6851

1

import vue from 'vue'

2import router from 'vue-router'34

vue.use(router);

5//按需載入,當渲染其他頁面時才載入其元件,並快取,減少首屏載入時間

6const index = resolve => require(['@/views/index.vue'], resolve)

7const category = resolve => require(['@/views/category.vue'], resolve)

8const categorymain = resolve => require(['@/components/category/main.vue'], resolve)

9const car = resolve => require(['@/views/car.vue'],resolve)

10const user = resolve => require(['@/views/user.vue'], resolve)

11const detail = resolve => require(['@/views/detail.vue'], resolve)

12const search = resolve => require(['@/views/search.vue'], resolve)

13const pay = resolve => require(['@/components/car/pay/pay.vue'], resolve)

14const login = resolve => require(['@/views/login.vue'], resolve)

1516

17export default new router(, ]

31}, , ,40,

47}, , ,60]

61 })

1

import vue from 'vue'

2import router from 'vue-router'34

// import index from '@/components/index/index'

5// import find from '@/components/find/find'

6// import order from '@/components/order/order'

7// import mine from '@/components/mine/mine'

8// import restaurantdetail from '@/components/index/restaurant-detail/restaurant-detail'

9// import restaurantlist from '@/components/index/restaurant-list/restaurant-list'

10// import goods from '@/components/index/restaurant-detail/goods/goods'

11// import ratings from '@/components/index/restaurant-detail/ratings/ratings'

12// import seller from '@/components/index/restaurant-detail/seller/seller'

13// import login from '@/components/login/login'

1415

vue.use(router)

1617

// 路由懶載入

18const index = (resolve) => )22}

23const find = (resolve) => )27}

28const order = (resolve) => )32}

33const mine = (resolve) => )37}

38const restaurantdetail = (resolve) => )42}

43const restaurantlist = (resolve) => )47}

48const goods = (resolve) => )52}

53const ratings = (resolve) => )57}

58const seller = (resolve) => )62}

63const login = (resolve) => )67}

6869

export default new router(,

77// 首頁78,

82// 登入83,

87// 商家列表88,

92// 商家模組93,

102,

106110

]111

},112

// 發現

113,

117// 訂單

118,

122// 我的

123127

]128 })

Vant按需載入

librarydirectory 複製 按需引入vant元件 import from vant 複製 使用vant元件 vue.use datetimepicker use button use list 複製 type primary 按鈕複製 複製 ps 出來vant庫外,像antiui ele...

antd按需載入

antd 是螞蟻金服推出的一套非常好的react ui庫,使用起來特別方便,而且也推出了antd手機端庫,同時還推出了vue的使用方式 import react from react import from antd import antd dist antd.css return 按鈕 在antd...

lodash按需載入

lodash提供了很多可用的方法供我們使用,是乙個很好用且用起來得心應手的工具庫。但是同時,lodash的體積也不小,我們在使用的時候可能只是使用了幾個方法,但是卻把整個lodash庫引入了。殺雞用了牛刀的感覺!對於這個問題,有幾種方案可供選擇。一.引入單個函式 lodash整個安裝完之後,引用方式...