【封装底部导航栏组件】用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的选项即可

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

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