tabbar实现

tabbar，element-ui实现底部

<template>
  <div>
    <router-view></router-view>
    <div class="footer">
      <van-tabbar route v-model="active" >
        <van-tabbar-item icon="home-o" to='/first'>首页</van-tabbar-item>
        <van-tabbar-item icon="qr" to='/space' >分类</van-tabbar-item>
        <van-tabbar-item icon="cart-o" to='/car'>购物车</van-tabbar-item>
        <van-tabbar-item icon="contact" to='person'>我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0
    };
  },

  mounted() {},
  methods: {},
  components: {}
};
</script>
<style scoped lang='scss'>

</style>
<style lang="scss">
   .footer {
    width: 100%;
    height: 1rem;
    .van-tabbar-item__icon .van-icon{
        font-size: 0.5rem;
    }
  .van-tabbar-item {
    font-size: 0.4rem;
    border-bottom: 0.1rem;
  }
} 
</style>