Skip to content

Commit 44c61ff

Browse files
FoxshikaFoxshika
committed
移动端适配 路由懒加载 css书写方案
1 parent c4b6da7 commit 44c61ff

File tree

3 files changed

+299
-7
lines changed

3 files changed

+299
-7
lines changed

‎index.html

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,18 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
5+
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scal=1.0,user-scalable=no,minimal-ui">
6+
<meta name="screen-orientation" content="portrait"/>
7+
<meta name="apple-mobile-web-app-capable" content="yes"/>
8+
<meta name="format-detection" content="telephone=no"/>
9+
<meta name="full-screen" content="yes"/>
10+
<meta name="x5-fullscreen" content="true"/>
611
<title>94club.github.io</title>
712
</head>
813
<body>
9-
<div id="app"></div>
14+
<div id="app">
15+
<router-view></router-view>
16+
</div>
1017
<!-- built files will be auto injected -->
1118
</body>
1219
</html>

‎src/App.vue

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<template>
22
<div id="app">
3-
<img src="./assets/logo.png">
43
<router-view/>
54
</div>
65
</template>
@@ -18,6 +17,5 @@ export default {
1817
-moz-osx-font-smoothing: grayscale;
1918
text-align: center;
2019
color: #2c3e50;
21-
margin-top: 60px;
2220
}
2321
</style>

‎src/router/router.js

Lines changed: 290 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,302 @@
11
import Router from 'vue-router'
22
import Vue from 'vue'
3-
import Home from '@/page/home/home.vue'
3+
import App from '../App'
4+
5+
// 路由懒加载
6+
const home = r => require.ensure([], () => r(require('../page/home/home')), 'home')
7+
const city = r => require.ensure([], () => r(require('../page/city/city')), 'city')
8+
const msite = r => require.ensure([], () => r(require('../page/msite/msite')), 'msite')
9+
const search = r => require.ensure([], () => r(require('../page/search/search')), 'search')
10+
const shop = r => require.ensure([], () => r(require('../page/shop/shop')), 'shop')
11+
const login = r => require.ensure([], () => r(require('../page/login/login')), 'login')
12+
const profile = r => require.ensure([], () => r(require('../page/profile/profile')), 'profile')
13+
const forget = r => require.ensure([], () => r(require('../page/forget/forget')), 'forget')
14+
const order = r => require.ensure([], () => r(require('../page/order/order')), 'order')
15+
const orderDetail = r => require.ensure([], () => r(require('../page/order/children/orderDetail')), 'orderDetail')
16+
const vipcard = r => require.ensure([], () => r(require('../page/vipcard/vipcard')), 'vipcard')
17+
const invoiceRecord = r => require.ensure([], () => r(require('../page/vipcard/children/invoiceRecord')), 'invoiceRecord')
18+
const useCart = r => require.ensure([], () => r(require('../page/vipcard/children/useCart')), 'useCart')
19+
const vipDescription = r => require.ensure([], () => r(require('../page/vipcard/children/vipDescription')), 'vipDescription')
20+
const food = r => require.ensure([], () => r(require('../page/food/food')), 'food')
21+
const confirmOrder = r => require.ensure([], () => r(require('../page/confirmOrder/confirmOrder')), 'confirmOrder')
22+
const remark = r => require.ensure([], () => r(require('../page/confirmOrder/children/remark')), 'remark')
23+
const payment = r => require.ensure([], () => r(require('../page/confirmOrder/children/payment')), 'payment')
24+
const userValidation = r => require.ensure([], () => r(require('../page/confirmOrder/children/userValidation')), 'userValidation')
25+
const invoice = r => require.ensure([], () => r(require('../page/confirmOrder/children/invoice')), 'invoice')
26+
const chooseAddress = r => require.ensure([], () => r(require('../page/confirmOrder/children/chooseAddress')), 'chooseAddress')
27+
const addAddress = r => require.ensure([], () => r(require('../page/confirmOrder/children/children/addAddress')), 'addAddress')
28+
const searchAddress = r => require.ensure([], () => r(require('../page/confirmOrder/children/children/children/searchAddress')), 'searchAddress')
29+
const foodDetail = r => require.ensure([], () => r(require('../page/shop/children/foodDetail')), 'foodDetail')
30+
const shopDetail = r => require.ensure([], () => r(require('../page/shop/children/shopDetail')), 'shopDetail')
31+
const shopSafe = r => require.ensure([], () => r(require('../page/shop/children/children/shopSafe')), 'shopSafe')
32+
const info = r => require.ensure([], () => r(require('../page/profile/children/info')), 'info')
33+
const setusername = r => require.ensure([], () => r(require('../page/profile/children/children/setusername')), 'setusername')
34+
const address = r => require.ensure([], () => r(require('../page/profile/children/children/address')), 'address')
35+
const add = r => require.ensure([], () => r(require('../page/profile/children/children/children/add')), 'add')
36+
const addDetail = r => require.ensure([], () => r(require('../page/profile/children/children/children/children/addDetail')), 'addDetail')
37+
const balance = r => require.ensure([], () => r(require('../page/balance/balance')), 'balance')
38+
const balanceDetail = r => require.ensure([], () => r(require('../page/balance/children/detail')), 'balanceDetail')
39+
const benefit = r => require.ensure([], () => r(require('../page/benefit/benefit')), 'benefit')
40+
const coupon = r => require.ensure([], () => r(require('../page/benefit/children/coupon')), 'coupon')
41+
const hbDescription = r => require.ensure([], () => r(require('../page/benefit/children/hbDescription')), 'hbDescription')
42+
const hbHistory = r => require.ensure([], () => r(require('../page/benefit/children/hbHistory')), 'hbHistory')
43+
const exchange = r => require.ensure([], () => r(require('../page/benefit/children/exchange')), 'exchange')
44+
const commend = r => require.ensure([], () => r(require('../page/benefit/children/commend')), 'commend')
45+
const points = r => require.ensure([], () => r(require('../page/points/points')), 'points')
46+
const pointsDetail = r => require.ensure([], () => r(require('../page/points/children/detail')), 'pointsDetail')
47+
const service = r => require.ensure([], () => r(require('../page/service/service')), 'service')
48+
const questionDetail = r => require.ensure([], () => r(require('../page/service/children/questionDetail')), 'questionDetail')
49+
const find = r => require.ensure([], () => r(require('../page/find/find')), 'find')
50+
const download = r => require.ensure([], () => r(require('../page/download/download')), 'download')
451

552
Vue.use(Router)
653

754
export default new Router({
855
routes: [
956
{
1057
path: '/',
11-
name: 'home',
12-
component: Home
58+
component: App, // 顶层路由，对应index.html
59+
children: [ // 二级路由，对应App.vue
60+
// 地址为空时跳转home页面
61+
{
62+
path: '',
63+
redirect: 'home'
64+
},
65+
// 首页城市列表页
66+
{
67+
path: '/home',
68+
component: home
69+
},
70+
// 当前选择城市页
71+
{
72+
path: '/city/:cityid',
73+
component: city
74+
},
75+
// 所有商铺列表页
76+
{
77+
path: 'msite',
78+
component: msite,
79+
meta: { keepAlive: true }
80+
},
81+
// 特色商铺列表页
82+
{
83+
path: '/food',
84+
component: food
85+
},
86+
// 搜索页
87+
{
88+
path: '/search/:geohash',
89+
component: search
90+
},
91+
// 商铺详情页
92+
{
93+
path: '/shop',
94+
component: shop,
95+
children: [
96+
{
97+
path: 'foodDetail', // 食品详情页
98+
component: foodDetail
99+
},
100+
{
101+
path: 'shopDetail', // 商铺详情页
102+
component: shopDetail,
103+
children: [
104+
{
105+
path: 'shopSafe', // 商铺安全认证页
106+
component: shopSafe
107+
}
108+
]
109+
}
110+
]
111+
},
112+
// 确认订单页
113+
{
114+
path: '/confirmOrder',
115+
component: confirmOrder,
116+
children: [
117+
{
118+
path: 'remark', // 订单备注
119+
component: remark
120+
},
121+
{
122+
path: 'invoice', // 发票抬头
123+
component: invoice
124+
},
125+
{
126+
path: 'payment', // 付款页面
127+
component: payment
128+
},
129+
{
130+
path: 'userValidation', // 用户验证
131+
component: userValidation
132+
},
133+
{
134+
path: 'chooseAddress', // 选择地址
135+
component: chooseAddress,
136+
children: [
137+
{
138+
path: 'addAddress', // 添加地址
139+
component: addAddress,
140+
children: [
141+
{
142+
path: 'searchAddress', // 搜索地址
143+
component: searchAddress
144+
}
145+
]
146+
}
147+
]
148+
},
149+
// 登录注册页
150+
{
151+
path: '/login',
152+
component: login
153+
},
154+
// 个人信息页
155+
{
156+
path: '/profile',
157+
component: profile,
158+
children: [
159+
{
160+
path: 'info', // 个人信息详情页
161+
component: info,
162+
children: [
163+
{
164+
path: 'setusername',
165+
component: setusername
166+
},
167+
{
168+
path: 'address',
169+
component: address, // 编辑地址
170+
children: [
171+
{
172+
path: 'add',
173+
component: add,
174+
children: [
175+
{
176+
path: 'addDetail',
177+
component: addDetail
178+
}
179+
]
180+
}
181+
]
182+
},
183+
{
184+
path: 'service', // 服务中心
185+
component: service
186+
}
187+
]
188+
},
189+
// 修改密码页
190+
{
191+
path: '/forget',
192+
component: forget
193+
},
194+
// 订单列表页
195+
{
196+
path: '/order',
197+
component: order,
198+
children: [
199+
{
200+
path: 'orderDetail', // 订单详情页
201+
component: orderDetail
202+
}
203+
]
204+
},
205+
// vip卡页
206+
{
207+
path: '/vipcard',
208+
component: vipcard,
209+
children: [
210+
{
211+
path: 'invoiceRecord', // 开发票
212+
component: invoiceRecord
213+
},
214+
{
215+
path: 'useCart', // 购买会员卡
216+
component: useCart
217+
},
218+
{
219+
path: 'vipDescription', // 会员说明
220+
component: vipDescription
221+
}
222+
]
223+
},
224+
// 发现页
225+
{
226+
path: '/find',
227+
component: find
228+
},
229+
// 下载页
230+
{
231+
path: '/download',
232+
component: download
233+
},
234+
// 服务中心
235+
{
236+
path: '/service',
237+
component: service,
238+
children: [
239+
{
240+
path: 'questionDetail', // 订单详情页
241+
component: questionDetail
242+
}
243+
]
244+
},
245+
// 余额
246+
{
247+
path: 'balance',
248+
component: balance,
249+
children: [
250+
{
251+
path: 'detail',
252+
component: balanceDetail
253+
}
254+
]
255+
},
256+
// 我的优惠页
257+
{
258+
path: 'benefit',
259+
component: benefit,
260+
children: [
261+
{
262+
path: 'coupon', // 代金券说明
263+
component: coupon
264+
},
265+
{
266+
path: 'hbDescription', // 红包说明
267+
component: hbDescription
268+
},
269+
{
270+
path: 'hbHistory', // 历史红包
271+
component: hbHistory
272+
},
273+
{
274+
path: 'exchange', // 兑换红包
275+
component: exchange
276+
},
277+
{
278+
path: 'commend', // 推荐有奖
279+
component: commend
280+
}
281+
]
282+
},
283+
// 我的积分页
284+
{
285+
path: 'points',
286+
component: points,
287+
children: [
288+
{
289+
path: 'detail', // 积分说明
290+
component: pointsDetail
291+
}
292+
]
293+
}
294+
]
295+
}
296+
]
297+
}
298+
299+
]
13300
}
14301
]
15302
})

0 commit comments

Comments
 (0)