vue仿美团饿了么--底部导航公共组件

底部导航栏，是每一个页面都需要用的，所以用的公共组件，在app.vue中引入

import common from "./components/footer/common.vue"
components:{
	common
},

放在app.vue中的id为app的div下

<common></common>

点击变色不同tabbar按钮，可以切换页面并且高亮显示，有很多种方法实现，比如mui。
这里用的方法是绑定一个class，class中定义好高亮的显示效果，这里只改变了颜色，判断当前路径，从而判断是否添加class。如果需要改变icon图标建议用mui

  	<div class="footer">
  		<span class="guide" @click="goTo('/')"><i class="el-icon-eleme" v-bind:class="{on:'/'===$route.path}">首页</i></span>
  		<span class="guide" @click="goTo('/cart')"><i class="el-icon-shopping-cart-2" v-bind:class="{on:'/cart'===$route.path}">订单列表</i></span>
  		<span class="guide" @click="goTo('/search')"><i class="el-icon-search" v-bind:class="{on:'/search'===$route.path}">搜索</i></span>
  		<span class="guide" @click="goTo('/self')"><i class="el-icon-user" v-bind:class="{on:'/self/login'===$route.path}">我的</i></span>
  	</div>`

效果图如下：