【封装底部导航栏组件】用vue-cli3脚手架手动教你封装一个底部导航栏组件

01 效果图

点击之后跳到所点击的页面并且显示颜色

02 代码实现

1.在components文件夹下新建一个文件MyNav.vue

2.在MyNav.vue文件下写代码

<template>
   <div class="nav">
    <div class="nav-item" :class="{select :name === 'Index'}" @click="to('Index')">
      <div class="icon">
        <i class="iconfont icon-eliaomo"></i>
      </div>
      <div class="take">主页</div>
    </div>

     <div class="nav-item" :class="{select :name === 'Announce'}" @click="to('Announce')">
      <div class="icon">
        <i class="iconfont icon-chaoshi"></i>
      </div>
      <div class="take">通告</div>
    </div>

    <div class="nav-item" :class="{select :name === 'Mine'}" @click="to('Mine')">
      <div class="icon">
        <i class="iconfont icon-wode"></i>
      </div>
      <div class="take">我的</div>
   </div>

 </div>
</template>

首先你在声明路由的时候，每个路由都有自己的名称，就是name
MyNav.vue 文件里面这里，这个name是计算属性
这样写，这个name就是你的路由名字，然后在html上面判断
如果，name是Index，我就给这个家一个class，就是加select
这个select对应的就是绿色的样式

注意：

如果是同级class，就不要有空格
如果是匹配子元素的class，就要用空格隔开
这个是css选择器
意思是匹配 有 select 的menu-item
能用不同的class去改变样式比较好
就是预先现在css写好，然后修改class就行了

<script>

// import MyNav from './components/nav.vue'
export default {
  computed: {
    name () {
      return this.$route.name
    }
  },
  methods: {
    to (name) {
      if (name === this.name) return false
      this.$router.replace({
        name
      })
    }
  }
}
</script>

传值是组件传值
这里是注册路由
然后监听url上面的变化，去显示不同的组件
这个vue-router自己会完成
你只需要配置好routes的选项即可

<style scoped>
.nav{
  position: fixed;
  /* margin: 10px; */
  bottom:0;
  height: 45px;
  display:flex;
  width: 100%;
  background:white;
  border-top:1px solid rgb(95, 93, 93);
}
.nav .nav-item{
  flex-grow: 1;
  color:rgb(155, 143, 143);
  display:flex;
  /* 垂直水平居中 */
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.nav .nav-item.select{
  color:rgb(74, 176, 235)
}

.nav .nav-item .icon .iconfont{
  font-size: 18px;
}
.nav .nav-item .take{
  font-size: 1px;
}
</style>

注意：阿里巴巴图标是需要引入的， 在public/index.html下引入

03 在需要的页面进行引入使用就可以了