vue封装tabbar组件

html

		

			
			{{ i.name }}
		
	

js

export default {
	data() {
		return {
			tabbarArr: [
				{ path: '/home', name: '首页', normal: require('@/assets/tabbar/home.png'), selected: require('@/assets/tabbar/home_active.png') },
				{ path: '/classification', name: '分类', normal: require('@/assets/tabbar/classification.png'), selected: require('@/assets/tabbar/classification_active.png') },
				{ path: '/shoppingCart', name: '购物车', normal: require('@/assets/tabbar/shoppingCart.png'), selected: require('@/assets/tabbar/shoppingCart_active.png') },
				{ path: '/personal', name: '我的', normal: require('@/assets/tabbar/personal.png'), selected: require('@/assets/tabbar/personal_active.png') }
			]
		};
	},
	methods: {
		switchTo(path) {
			this.$router.replace(path);
		}
	}
};

css

.tabbar {
	width: 100%;
	height: 60px;
	position: fixed;
	bottom: 0;
	border-top: 1px solid #ccc;
}

.tabbar-item {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}
.tabbar-item img {
	width: 30%;
	margin-bottom: 2px;
}
.tabbar-item span {
	color: #666;
}
.on {
	color: #f4ea2a !important;
}

之后会遇到 vue router 报错： Uncaught (in promise)

解决方案安装

npm i [email protected] -S