367c2519 by sunnie Committed by GitHub

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

pr分离路由与接口
2 parents cd839dc6 fa6a5ced
<template>
<div class="app" id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
<!-- tabbar -->
<TabBar></TabBar>
<div id="app">
<router-view />
</div>
</template>
<script>
import TabBar from '@/components/TabBar'
export default {
name: 'App',
components: {
TabBar
}
name: 'App'
}
</script>
<style lang="scss"></style>
......
const api = {
Login: '/user/login',
UserInfo: '/user/userinfo',
UserName: '/user/name'
}
export default api
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
})
}
......
<template>
<div>
<van-tabbar fixed route>
<van-tabbar-item to="/" icon="home-o">
首页
</van-tabbar-item>
<van-tabbar-item to="/about" icon="user-o">
关于我
<van-tabbar fixed route v-model="active" @change="handleChange">
<van-tabbar-item v-for="(item, index) in data" :to="item.to" :icon="item.icon" :key="index">
{{ item.title }}
</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',
props: {
defaultActive: {
type: Number,
default: 0
},
data: {
type: Array,
default: () => {
return []
}
}
},
data() {
return {
active: 0
active: this.defaultActive
}
},
methods: {}
methods: {
handleChange(value) {
this.$emit('change', value)
}
}
}
</script>
......
/**
* 基础路由
* @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 }
}
]
}
]
}
]
<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>
<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>
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 = () =>
new Router({
// mode: 'history', // 如果你是 history模式 需要配置vue.config.js publicPath
// base: '/app/',
scrollBehavior: () => ({ y: 0 }),
routes: router
})
const createRouter = () => new Router({
mode: 'history',
base: process.env.BASE_URL,
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})
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 createRouter()
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!