367c2519 by sunnie Committed by GitHub

Merge pull request #14 from edenleung/vue-h5-template

pr分离路由与接口
2 parents cd839dc6 fa6a5ced
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>
......
1 const api = {
2 Login: '/user/login',
3 UserInfo: '/user/userinfo',
4 UserName: '/user/name'
5 }
6
7 export default api
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
......
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 ]
1 <template>
2 <div class="app-containter">
3 <keep-alive v-if="$route.meta.keepAlive">
4 <router-view></router-view>
5 </keep-alive>
6 <router-view v-else></router-view>
7 </div>
8 </template>
9
10 <script>
11 export default {
12 name: 'AppLayout'
13 }
14 </script>
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
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!