封装一个底部导航

html部分

​
<template>
	<div class="Tabbar">
		<ul>
			<li :class="{active : types==index}" v-for='(item,index) in tabberlist' :key="index"
				@click="color(index);jump(item.path)">
				<i class="iconfont" style="font-size: 20px;">{{item.iconContent}}</i>
				<span style="font-size: 14px;">{{item.title}}</span>
			</li>

		</ul>
	</div>
</template>

​

JavaScript部分

<script>
	export default {
		data() {
			return {
				//手动改变索引值

				tabberlist: [{
						title: '首页',
						iconContent: '\ue626',
						path: "/home"
					},
					{
						title: '发现',
						iconContent: '\ue60a',
						path: "/find"
					},
					{
						title: '购物车',
						iconContent: '\ue73d',
						path: "/shop"
					},
					{
						title: '我的',
						iconContent: '\ue647',
						path: '/mind'
					},
				],
				types: 0,
			}
		},
		computed: {
		
		},
		methods: {
			//自动绑定索引值
			color(index) {
				this.types = index;
				console.log(this.types)
			},
			jump(path) {
				//判断是否点击了同一个路由
				if (this.$route.path == path) return;
				//对应跳转页面
				this.$router.replace(path);
			}
		},
	}
</script>