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

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

思路

1: 创建导航组件

2: 创建子组件

3: 配置子组件路由

 

接下我们来看一下代码吧

导航组建

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

我们来看看子组件的路由配置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')
				},
			],
		},
		
		
	]
});