基于vue实现移动端tab切换方式

废话不多说了,这种方法比较灵活, 简单

思路

1: 创建导航组件

2: 创建子组件

3: 配置子组件路由

 

接下我们来看一下代码吧

导航组建

<template>
	<div>
		<!-- 头部 -->
		<header id="header">
			<div class="pure-box flex-box-x">
				<div class="left flex-y-center"></div>
				<div class="center col-xs-x flex-xy-center">
					寄售中心
				</div>
				<div class="right flex-y-center"></div>
			</div>
		</header>
		<!-- 切换 -->
		<div class="tabs flex-box-x" id="tabs">
			<div class="item col-xs-x" v-for="(vo, index) in tabs_menu" :key="index" v-bind:class="{'active': active == index}" tapmode @click="toggle(index, vo.view)"><span>{{vo.name}}</span></div>
		</div>
		<!--:is实现多个组件实现同一个挂载点-->
		<component :is="currentView"></component>
	</div>
</template>
	
<script>
	import unpaid from '../../views/new/on_consignment_unpaid'		// 未付款
	import stay from '../../views/new/on_consignment_stay'			// 待寄售
	import sale from '../../views/new/on_consignment_sale'			// 寄售中
	import receipt from '../../views/new/on_consignment_receipt'	// 已寄售
	import refund from '../../views/new/on_consignment_refund'		// 已退款
	export default{
		name: 'OnConsignment',
		components: {
			unpaid,
			stay,
			sale,
			receipt,
			refund
		},
		data () {
			return {
				// 顶部切换id
				active:0,
				currentView:'unpaid',
				tabs_menu: [{
					name: "未付款",
					view: "unpaid"
				}, {
					name: "待寄售",
					view: "stay"
				}, {
					name: "寄售中",
					view: 'sale'
				}, {
					name: "已售出",
					view: 'receipt' 
				}, {
					name: "已退款",
					view: 'refund'
				}],
			}
		},
		methods: {
			toggle(i, v) {
				this.active = i
				this.currentView = v
			}
		},
	}
</script>

<style scoped>
	.tabs {
		height: 0.88rem;
		background: #fff;
		border-bottom:   1px solid #E6E6E6
	}
	
	.tabs .item {
		align-self: flex-end;
	}
	
	.tabs .item span {
		font-size: 0.28rem;
		font-weight:400;
		color: #11270E;
	}
	
	.tabs .item.active span {
		color: #ed3645;
	}
</style>

子组件就不多说了,根据自己的需求

我们来看看子组件的路由配置vue-cli    src - router - index.js

const router = new Router({
	mode: 'history',
	routes: [
		{	
			//寄售中心
			path: '/on_consignment',
			name: '寄售中心',
			component: () => import('@/views/new/on_consignment'),
			children: [
				{	
					// 未付款
					path: '/unpaid',
					name: 'Unpaid',
					component: () => import('@/views/new/on_consignment_unpaid')
				},
				{	
					// 待寄售
					path: '/stay',
					name: 'OnConsignmentStay',
					component: () => import('@/views/new/on_consignment_stay')
				},
				{
					// 寄售中
					path: '/sale',
					name: 'sale',
					component: () => import('@/views/new/on_consignment_sale')
				},
				{
					// 已出售
					path: '/receipt',
					name: 'receipt',
					component: () => import('@/views/new/on_consignment_receipt')
				},
				{
					// 已退款
					path: '/refund',
					name: 'refund',
					component: () => import('@/views/new/on_consignment_refund')
				},
			],
		},
		
		
	]
});