[パッケージ下部ナビゲーションバーコンポーネント] vue-cli3足場を使用して、下部ナビゲーションバーコンポーネントのカプセル化を手動で教える

01レンダリング

クリックするとクリックしたページにジャンプして色を表示します

02コードの実装

1.コンポーネントフォルダーの下に新しいファイル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>

まず、ルートを宣言すると、各ルートには独自の名前が付けられ
ます。これは、MyNav.vueファイル内の名前です。ここでは、この名前は計算された属性です
。このように記述します。この名前がルート名であり、htmlである
かどうかを判断します。これはインデックスです。このファミリにクラスを指定します。つまり、選択を追加します。
この選択は緑のスタイルに対応しています。

注：

クラスの同じレベルの場合は、スペースを持っていない
、それは、クラスの子要素にマッチした場合、それが必要であるスペースで区切っ
このCSSセレクタがされて
そこに意味を選択し、一致するメニュー項目は
、より良い別のクラスのスタイルを変更するために使用することができ
、事前にあります次に、CSSを記述して、クラスを変更します。

<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は
自分で行います。ルートのオプションを構成するだけです。

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

注：Alibabaアイコンを導入する必要があり、それはpublic / index.htmlの下に導入されます

03必要なページに導入して使用する