vue移动端底部导航栏

最近写个小demo书写移动端的小demo，（别忘了移动端的适配问题）
效果图如下


点击底下的导航对应相应的页面
代码如下

<template>
  <div class="footer">
    <el-row>
      <el-menu
        :default-active="this.$route.path"
        class="el-menu-vertical-demo"
        router
      >

        <el-col :span="6">
          <el-menu-item index="/index">
            <i class="iconfont icon-icon-test1"></i>
            <div slot="title">一</div>
          </el-menu-item>
        </el-col>
        <el-col :span="6">
          <el-menu-item index="/indextwo">
            <i class="iconfont icon-icon-test2"></i>
            <div slot="title">二</div>
          </el-menu-item>
        </el-col>
        <el-col :span="6">
          <el-menu-item index="/indexthree">
            <i class="iconfont icon-icon-test"></i>
            <div slot="title">三</div>
          </el-menu-item>
        </el-col>
        <el-col :span="6">
          <el-menu-item index="/indexfour">
            <i class="iconfont icon-icon-test3"></i>
            <div slot="title">四</div>
          </el-menu-item>
        </el-col>
      </el-menu>
    </el-row>
  </div>
</template>

<script>
import './../assets/font_5o8n0ozncyh/iconfont.css'
export default {

}
</script>

<style lang="less" scoped>
// 底部
.footer {
  max-width: 750px;
  min-width: 320px;
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  background: #fff;
  height: 1.306667rem;
  border-top: 1px solid #f2f2f2;
  .el-row {
    width: 100%;
  }
  .el-col {
    font-size: 0.373333rem;
    text-align: center;
    color: #333;
    .el-menu-item {
      height: 0;
      font-size: 0.266667rem;
      margin-top: 0.133333rem;
    }
  }
  .iconfont {
    font-size: 0.666667rem;
    div {
      font-size: 0.32rem;
      color: #bbb;
    }
  }
  .el-tab-pane {
    width: 33.33%;
  }
}
.el-menu-item {
  line-height: 0.54rem;
}
</style>

可以单独提出当一个组件，在要用的组件中进行引入即可
例：在index中引入common.vue

<common></common>
import common from './../components/common.vue'
components: {
    common,
},

下方有几个导航栏就在几个组件中引入即可~