Merge pull request #14 from edenleung/vue-h5-template
pr分离路由与接口
Showing
8 changed files
with
168 additions
and
62 deletions
1 | <template> | 1 | <template> |
2 | <div class="app" id="app"> | 2 | <div id="app"> |
3 | <keep-alive> | 3 | <router-view /> |
4 | <router-view v-if="$route.meta.keepAlive"></router-view> | ||
5 | </keep-alive> | ||
6 | <router-view v-if="!$route.meta.keepAlive"></router-view> | ||
7 | <!-- tabbar --> | ||
8 | <TabBar></TabBar> | ||
9 | </div> | 4 | </div> |
10 | </template> | 5 | </template> |
11 | <script> | 6 | <script> |
12 | import TabBar from '@/components/TabBar' | ||
13 | |||
14 | export default { | 7 | export default { |
15 | name: 'App', | 8 | name: 'App' |
16 | components: { | ||
17 | TabBar | ||
18 | } | ||
19 | } | 9 | } |
20 | </script> | 10 | </script> |
21 | <style lang="scss"></style> | 11 | <style lang="scss"></style> | ... | ... |
src/api/index.js
0 → 100644
1 | import qs from 'qs' | 1 | import api from './index' |
2 | |||
2 | // axios | 3 | // axios |
3 | import request from '@/utils/request' | 4 | import request from '@/utils/request' |
4 | // user api | ||
5 | 5 | ||
6 | // 登录 | 6 | // 登录 |
7 | export function login(params) { | 7 | export function login(data) { |
8 | return request({ | 8 | return request({ |
9 | url: '/user/login', | 9 | url: api.Login, |
10 | method: 'post', | 10 | method: 'post', |
11 | data: qs.stringify(params) | 11 | data |
12 | }) | 12 | }) |
13 | } | 13 | } |
14 | |||
14 | // 用户信息 post 方法 | 15 | // 用户信息 post 方法 |
15 | export function getUserInfo(params) { | 16 | export function getUserInfo(data) { |
16 | return request({ | 17 | return request({ |
17 | url: '/user/userinfo', | 18 | url: api.UserInfo, |
18 | method: 'post', | 19 | method: 'post', |
19 | data: qs.stringify(params), | 20 | data, |
20 | hideloading: true | 21 | hideloading: true |
21 | }) | 22 | }) |
22 | } | 23 | } |
... | @@ -24,8 +25,9 @@ export function getUserInfo(params) { | ... | @@ -24,8 +25,9 @@ export function getUserInfo(params) { |
24 | // 用户名称 get 方法 | 25 | // 用户名称 get 方法 |
25 | export function getUserName(params) { | 26 | export function getUserName(params) { |
26 | return request({ | 27 | return request({ |
27 | url: '/user/name?' + qs.stringify(params), | 28 | url: api.UserName, |
28 | method: 'get', | 29 | method: 'get', |
30 | params, | ||
29 | hideloading: true | 31 | hideloading: true |
30 | }) | 32 | }) |
31 | } | 33 | } | ... | ... |
1 | <template> | 1 | <template> |
2 | <div> | 2 | <div> |
3 | <van-tabbar fixed route> | 3 | <van-tabbar fixed route v-model="active" @change="handleChange"> |
4 | <van-tabbar-item to="/" icon="home-o"> | 4 | <van-tabbar-item v-for="(item, index) in data" :to="item.to" :icon="item.icon" :key="index"> |
5 | 首页 | 5 | {{ item.title }} |
6 | </van-tabbar-item> | ||
7 | <van-tabbar-item to="/about" icon="user-o"> | ||
8 | 关于我 | ||
9 | </van-tabbar-item> | 6 | </van-tabbar-item> |
10 | </van-tabbar> | 7 | </van-tabbar> |
11 | <!-- <van-tabbar fixed v-model="active" @change="onChange"> | ||
12 | <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item> | ||
13 | <van-tabbar-item to="/about" icon="user-o">关于我</van-tabbar-item> | ||
14 | </van-tabbar> --> | ||
15 | </div> | 8 | </div> |
16 | </template> | 9 | </template> |
17 | <script> | 10 | <script> |
18 | export default { | 11 | export default { |
19 | name: 'TabBar', | 12 | name: 'TabBar', |
13 | props: { | ||
14 | defaultActive: { | ||
15 | type: Number, | ||
16 | default: 0 | ||
17 | }, | ||
18 | data: { | ||
19 | type: Array, | ||
20 | default: () => { | ||
21 | return [] | ||
22 | } | ||
23 | } | ||
24 | }, | ||
20 | data() { | 25 | data() { |
21 | return { | 26 | return { |
22 | active: 0 | 27 | active: this.defaultActive |
23 | } | 28 | } |
24 | }, | 29 | }, |
25 | methods: {} | 30 | methods: { |
31 | handleChange(value) { | ||
32 | this.$emit('change', value) | ||
33 | } | ||
34 | } | ||
26 | } | 35 | } |
27 | </script> | 36 | </script> |
28 | 37 | ... | ... |
src/config/router.config.js
0 → 100644
1 | /** | ||
2 | * 基础路由 | ||
3 | * @type { *[] } | ||
4 | */ | ||
5 | export const constantRouterMap = [ | ||
6 | { | ||
7 | path: '/', | ||
8 | name: 'index', | ||
9 | component: () => import('@/layouts/AppLayout'), | ||
10 | redirect: '/home', | ||
11 | meta: { | ||
12 | title: '首页', | ||
13 | keepAlive: false | ||
14 | }, | ||
15 | children: [ | ||
16 | { | ||
17 | path: '/', | ||
18 | component: () => import('@/layouts/TabBarLayout'), | ||
19 | redirect: '/home', | ||
20 | meta: { | ||
21 | title: '首页', | ||
22 | keepAlive: false | ||
23 | }, | ||
24 | children: [ | ||
25 | { | ||
26 | path: '/home', | ||
27 | name: 'Home', | ||
28 | component: () => import('@/views/home/index'), | ||
29 | meta: { title: '首页', keepAlive: false } | ||
30 | }, | ||
31 | { | ||
32 | path: '/about', | ||
33 | name: 'About', | ||
34 | component: () => import('@/views/home/about'), | ||
35 | meta: { title: '关于我', keepAlive: false } | ||
36 | } | ||
37 | ] | ||
38 | } | ||
39 | ] | ||
40 | } | ||
41 | ] |
src/layouts/AppLayout.vue
0 → 100644
src/layouts/TabBarLayout.vue
0 → 100644
1 | <template> | ||
2 | <div class="tabbar-layout-containter"> | ||
3 | <div class="tabbar-layout-content"> | ||
4 | <keep-alive v-if="$route.meta.keepAlive"> | ||
5 | <router-view></router-view> | ||
6 | </keep-alive> | ||
7 | <router-view v-else></router-view> | ||
8 | </div> | ||
9 | <div class="tabbar-layout-footer"> | ||
10 | <TabBar :data="tabbars" @change="handleChange" /> | ||
11 | </div> | ||
12 | </div> | ||
13 | </template> | ||
14 | |||
15 | <script> | ||
16 | import TabBar from '@/components/TabBar' | ||
17 | export default { | ||
18 | name: 'TabBarLayout', | ||
19 | data() { | ||
20 | return { | ||
21 | tabbars: [ | ||
22 | { | ||
23 | title: '首页', | ||
24 | to: { | ||
25 | name: 'Home' | ||
26 | }, | ||
27 | icon: 'home-o' | ||
28 | }, | ||
29 | { | ||
30 | title: '关于我', | ||
31 | to: { | ||
32 | name: 'About' | ||
33 | }, | ||
34 | icon: 'user-o' | ||
35 | } | ||
36 | ] | ||
37 | } | ||
38 | }, | ||
39 | components: { | ||
40 | TabBar | ||
41 | }, | ||
42 | methods: { | ||
43 | handleChange(v) { | ||
44 | console.log('tab value:', v) | ||
45 | } | ||
46 | } | ||
47 | } | ||
48 | </script> |
1 | import Vue from 'vue' | 1 | import Vue from 'vue' |
2 | import Router from 'vue-router' | 2 | import Router from 'vue-router' |
3 | import { constantRouterMap } from '@/config/router.config' | ||
4 | |||
5 | // hack router push callback | ||
6 | const originalPush = Router.prototype.push | ||
7 | Router.prototype.push = function push (location, onResolve, onReject) { | ||
8 | if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject) | ||
9 | return originalPush.call(this, location).catch(err => err) | ||
10 | } | ||
3 | 11 | ||
4 | Vue.use(Router) | 12 | Vue.use(Router) |
5 | export const router = [ | ||
6 | { | ||
7 | path: '/', | ||
8 | name: 'index', | ||
9 | component: () => import('@/views/home/index'), // 路由懒加载 | ||
10 | meta: { | ||
11 | title: '首页', // 页面标题 | ||
12 | keepAlive: false // keep-alive 标识 | ||
13 | } | ||
14 | }, | ||
15 | { | ||
16 | path: '/about', | ||
17 | name: 'about', | ||
18 | component: () => import('@/views/home/about'), | ||
19 | meta: { | ||
20 | title: '关于我', | ||
21 | keepAlive: false | ||
22 | } | ||
23 | } | ||
24 | ] | ||
25 | 13 | ||
26 | const createRouter = () => | 14 | const createRouter = () => new Router({ |
27 | new Router({ | 15 | mode: 'history', |
28 | // mode: 'history', // 如果你是 history模式 需要配置vue.config.js publicPath | 16 | base: process.env.BASE_URL, |
29 | // base: '/app/', | 17 | scrollBehavior: () => ({ y: 0 }), |
30 | scrollBehavior: () => ({ y: 0 }), | 18 | routes: constantRouterMap |
31 | routes: router | 19 | }) |
32 | }) | 20 | |
21 | const router = createRouter() | ||
22 | |||
23 | // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465 | ||
24 | export function resetRouter () { | ||
25 | const newRouter = createRouter() | ||
26 | router.matcher = newRouter.matcher // reset router | ||
27 | } | ||
33 | 28 | ||
34 | export default createRouter() | 29 | export default router | ... | ... |
-
Please register or sign in to post a comment