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

pr分离路由与接口

src/App.vue

@@ -1,21 +1,11 @@
 <template>
-  <div class="app" id="app">
+  <div id="app">
-    <keep-alive>
+    <router-view />
-      <router-view v-if="$route.meta.keepAlive"></router-view>
-    </keep-alive>
-    <router-view v-if="!$route.meta.keepAlive"></router-view>
-    <!-- tabbar -->
-    <TabBar></TabBar>
   </div>
 </template>
 <script>
-import TabBar from '@/components/TabBar'
-
 export default {
-  name: 'App',
+  name: 'App'
-  components: {
-    TabBar
-  }
 }
 </script>
 <style lang="scss"></style>

src/api/index.js

@@ -0,0 +1,7 @@
+const api = {
+  Login: '/user/login',
+  UserInfo: '/user/userinfo',
+  UserName: '/user/name'
+}
+
+export default api

src/api/user.js

@@ -1,22 +1,23 @@
-import qs from 'qs'
+import api from './index'
+
 // axios
 import request from '@/utils/request'
-// user api
 
 // 登录
-export function login(params) {
+export function login(data) {
   return request({
-    url: '/user/login',
+    url: api.Login,
     method: 'post',
-    data: qs.stringify(params)
+    data
   })
 }
+
 // 用户信息 post 方法
-export function getUserInfo(params) {
+export function getUserInfo(data) {
   return request({
-    url: '/user/userinfo',
+    url: api.UserInfo,
     method: 'post',
-    data: qs.stringify(params),
+    data,
     hideloading: true
   })
 }
@@ -24,8 +25,9 @@ export function getUserInfo(params) {
 // 用户名称 get 方法
 export function getUserName(params) {
   return request({
-    url: '/user/name?' + qs.stringify(params),
+    url: api.UserName,
     method: 'get',
+    params,
     hideloading: true
   })
 }

src/components/TabBar.vue

@@ -1,28 +1,37 @@
 <template>
   <div>
-    <van-tabbar fixed route>
+    <van-tabbar fixed route v-model="active" @change="handleChange">
-      <van-tabbar-item to="/" icon="home-o">
+      <van-tabbar-item v-for="(item, index) in data" :to="item.to" :icon="item.icon" :key="index">
-        首页
+        {{ item.title }}
-      </van-tabbar-item>
-      <van-tabbar-item to="/about" icon="user-o">
-        关于我
       </van-tabbar-item>
     </van-tabbar>
-    <!--  <van-tabbar fixed v-model="active" @change="onChange">
-      <van-tabbar-item  to="/home" icon="home-o">首页</van-tabbar-item>
-      <van-tabbar-item  to="/about" icon="user-o">关于我</van-tabbar-item>
-    </van-tabbar> -->
   </div>
 </template>
 <script>
 export default {
   name: 'TabBar',
-  data() {
+  props: {
-    return {
+    defaultActive: {
-      active: 0
+      type: Number,
+      default: 0
+    },
+    data: {
+      type: Array,
+      default: () => {
+        return []
+      }
     }
   },
-  methods: {}
+  data() {
+    return {
+      active: this.defaultActive
+    }
+  },
+  methods: {
+    handleChange(value) {
+      this.$emit('change', value)
+    }
+  }
 }
 </script>
 

src/config/router.config.js

@@ -0,0 +1,41 @@
+/**
+ * 基础路由
+ * @type { *[] }
+ */
+export const constantRouterMap = [
+  {
+    path: '/',
+    name: 'index',
+    component: () => import('@/layouts/AppLayout'),
+    redirect: '/home',
+    meta: {
+      title: '首页',
+      keepAlive: false
+    },
+    children: [
+      {
+        path: '/',
+        component: () => import('@/layouts/TabBarLayout'),
+        redirect: '/home',
+        meta: {
+          title: '首页',
+          keepAlive: false
+        },
+        children: [
+          {
+            path: '/home',
+            name: 'Home',
+            component: () => import('@/views/home/index'),
+            meta: { title: '首页', keepAlive: false }
+          },
+          {
+            path: '/about',
+            name: 'About',
+            component: () => import('@/views/home/about'),
+            meta: { title: '关于我', keepAlive: false }
+          }
+        ]
+      }
+    ]
+  }
+]

src/layouts/AppLayout.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="app-containter">
+    <keep-alive v-if="$route.meta.keepAlive">
+      <router-view></router-view>
+    </keep-alive>
+    <router-view v-else></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppLayout'
+}
+</script>

src/layouts/TabBarLayout.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="tabbar-layout-containter">
+    <div class="tabbar-layout-content">
+      <keep-alive v-if="$route.meta.keepAlive">
+        <router-view></router-view>
+      </keep-alive>
+      <router-view v-else></router-view>
+    </div>
+    <div class="tabbar-layout-footer">
+      <TabBar :data="tabbars" @change="handleChange" />
+    </div>
+  </div>
+</template>
+
+<script>
+import TabBar from '@/components/TabBar'
+export default {
+  name: 'TabBarLayout',
+  data() {
+    return {
+      tabbars: [
+        {
+          title: '首页',
+          to: {
+            name: 'Home'
+          },
+          icon: 'home-o'
+        },
+        {
+          title: '关于我',
+          to: {
+            name: 'About'
+          },
+          icon: 'user-o'
+        }
+      ]
+    }
+  },
+  components: {
+    TabBar
+  },
+  methods: {
+    handleChange(v) {
+      console.log('tab value:', v)
+    }
+  }
+}
+</script>

src/router/index.js

@@ -1,34 +1,29 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+import { constantRouterMap } from '@/config/router.config'
+
+// hack router push callback
+const originalPush = Router.prototype.push
+Router.prototype.push = function push (location, onResolve, onReject) {
+  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
+  return originalPush.call(this, location).catch(err => err)
+}
 
 Vue.use(Router)
-export const router = [
-  {
-    path: '/',
-    name: 'index',
-    component: () => import('@/views/home/index'), // 路由懒加载
-    meta: {
-      title: '首页', // 页面标题
-      keepAlive: false // keep-alive 标识
-    }
-  },
-  {
-    path: '/about',
-    name: 'about',
-    component: () => import('@/views/home/about'),
-    meta: {
-      title: '关于我',
-      keepAlive: false
-    }
-  }
-]
 
-const createRouter = () =>
+const createRouter = () => new Router({
-  new Router({
+  mode: 'history',
-    // mode: 'history', // 如果你是 history模式 需要配置vue.config.js publicPath
+  base: process.env.BASE_URL,
-    // base: '/app/',
+  scrollBehavior: () => ({ y: 0 }),
-    scrollBehavior: () => ({ y: 0 }),
+  routes: constantRouterMap
-    routes: router
+})
-  })
 
-export default createRouter()
+const router = createRouter()
+
+// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
+export function resetRouter () {
+  const newRouter = createRouter()
+  router.matcher = newRouter.matcher // reset router
+}
+
+export default router