[Componente de la barra de navegación inferior del paquete] Use el andamio vue-cli3 para enseñarle manualmente a encapsular un componente de la barra de navegación inferior

01 representaciones

Haga clic para saltar a la página clicada y mostrar el color.

02 implementación de código

1. Cree un nuevo archivo MyNav.vue en la carpeta de componentes

2. Escriba el código en el archivo 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>

En primer lugar, cuando declara una ruta, cada ruta tiene su propio nombre, que es el nombre en el
archivo MyNav.vue. Aquí, este nombre es un atributo calculado
. Escriba de esta manera, este nombre es su nombre de ruta, y luego juzgue en el html
si, nombre Es Index, le daré una clase a esta familia, es decir, agregar select.
Esta selección corresponde al estilo verde.

Nota:

Si el mismo nivel de clase, no tienen el espacio
si se compara clase de elemento secundario, es necesario separados por espacios
esto es selectores CSS
significa que haya seleccionar el elemento de menú correspondiente
se puede utilizar para cambiar el estilo de una clase diferente mejor
es avanzar Ahora escriba el CSS y luego modifique la clase

<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>

El paso por valor es por componente.
Aquí está la ruta de registro
y escucha el cambio de url para mostrar los diferentes componentes.
Este vue-router lo hará
usted mismo. Solo necesita configurar las opciones de rutas.

<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>

Nota: El ícono de Alibaba necesita ser introducido, y se presenta en public / index.html

03 Preséntalo y úsalo en la página requerida