Vue の下部ナビゲーション バー TabBar を実装するための非常に詳細なチュートリアル

解決する： {
    拡張子: ['.js', '.vue', '.json'],
    エイリアス: {
      '@': 解決('src')、
      'アセット': 解決('src/assets')、      
      'コンポーネント': 解決('src/components'),
      'ビュー': 解決('src/views')、
    }
  },

<テンプレート>
  <div id="アプリ">
    <ルータービュー></ルータービュー>
    <メインタブバー></メインタブバー>
  </div>
</テンプレート>
<スクリプトタイプ="モジュール">
'components/MainTabBar' から MainTabBar をインポートします。
エクスポートデフォルト{
  名前: 'アプリ'、
  コンポーネント:{
    メインタブバー
  }
}
</スクリプト>
 
<スタイル>
  @import "assets/css/base";
</スタイル>

<テンプレート>
   <div>
       <タブバー>
      <タブバー項目パス="/home" activeColor="紫">
        <img slot="item-icon" src="~assets/img/tabbar/shouye.png" alt="" >
        <img slot="item-icon-active" src="~assets/img/tabbar/shouye.active.png" alt="">
        <div slot="item-text">ホーム</div>
      </タブバー項目>
      <タブバー項目パス="/カテゴリ" activeColor="紫">
         <img slot="item-icon" src="~assets/img/tabbar/fenlei.png" alt="">
      <img slot="item-icon-active" src="~assets/img/tabbar/fenlei.active.png" alt="">
         <div slot="item-text">カテゴリー</div>
      </タブバー項目>
      <タブバーアイテムパス="/カート" activeColor="紫">
         <img slot="item-icon" src="~assets/img/tabbar/gouwuche.png" alt="">
         <img slot="item-icon-active" src="~assets/img/tabbar/gouwuche.active.png" alt="">
        <div slot="item-text">ショッピングカート</div>
      </タブバー項目>
      <タブバー項目パス="/プロファイル" activeColor="紫">
         <img slot="item-icon" src="~assets/img/tabbar/wode.png" alt="">
         <img slot="item-icon-active" src="~assets/img/tabbar/wode.active.png" alt="">
        <div slot="item-text">マイ</div>
      </タブバー項目>
    </タブバー>
   </div>
</テンプレート>

<スクリプト>
'components/tabbar/TabBar' から TabBar をインポートします。
'components/tabbar/TabBarItem' から TabBarItem をインポートします。
エクスポートデフォルト{
    名前:"メインタブバー",
    コンポーネント:{
        タブバー、
        タブバーアイテム
    }
}
</スクリプト>

<スタイル>

</スタイル>

<テンプレート>  
    <div id="タブバー">
      <スロット></スロット>
    </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
    名前:'タブバー'
}
</スクリプト>

<スタイル>

</スタイル>

<テンプレート>
  <div class="タブバーアイテム" @click="itemClick">
     <div v-if="!isActive">
       <スロット名="アイテムアイコン"></スロット>
     </div>
     <div v-else>
        <スロット名="アイテムアイコンアクティブ"></スロット>
     </div>
     <div :style="activeStyle"><slot name="item-text"></slot></div>
     
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    名前:"タブバーアイテム",
    小道具:{
      パス:文字列、
      アクティブカラー:{
        タイプ:文字列、
        デフォルト: '赤'
      }
    },
    データ（）{
        戻る {
           // アクティブ:true
        }
    },
    計算:{
      isActive(){
        //判断//this.$route.path.indexOf(this.path) !== -1 を返します
        // this.$route.path === this.path を返します
        this.$route.path.indexOf(this.path)?false:true を返します。
      },
      アクティブスタイル(){
        this.isActive?{color:this.activeColor}:{} を返します。
      }
    },
    方法:{
      アイテムクリック(){
        this.$router.replace(this.path)
      }
    }

}
</スクリプト>

<スタイル>
     #タブバー{
    ディスプレイ: フレックス;
    
  }
  #タブバー{
    背景色: #f6f6f6;
    上境界線: 2px #ccc;
    位置: 固定;
    左: 0;
    右: 0;
    下部: 0;
    ボックスの影:0px -1px 1px rgba(100,100,100,.2);
  }
  .タブバー項目{
    フレックス: 1;
    テキスト配置: 中央;
    高さ: 49px;
    フォントサイズ: 14px;
  } 
 .タブバーアイテム画像{
     幅: 24px;
     高さ: 24px;
     上マージン: 3px;
     垂直位置合わせ: 中央;
     下マージン: 3px;
 }
 。アクティブ{
     色: 赤;
 }
</スタイル>

'vue' から Vue をインポートします
'vue-router' から VueRouter をインポートします。
const Home = () => import('views/home/home')
const カテゴリー = () => インポート('views/category/category')
const Cart = () => import('views/cart/cart')
const プロファイル = () => インポート('../views/profile/profile')

//1. プラグインをインストールする Vue.use(VueRouter)

//2. ルーティングオブジェクトを作成する constroutes = [
    {
        パス：''、
        リダイレクト:'/home'    
    },
    {
        パス:'/home',
        コンポーネント:ホーム    
    },
    {
        パス:'/category',
        コンポーネント:カテゴリ    
    },
    {
        パス:'/cart',
        コンポーネント:カート    
    },
    {
        パス:'/profile',
        コンポーネント:プロファイル    
    }
]
const ルーター = 新しい VueRouter({
    ルート、
    モード:'履歴'
})

//3. ルーターをエクスポートする
デフォルトルーターをエクスポートする

<テンプレート>
    <h2>ホーム</h2>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    名前:"ホーム"
}
</スクリプト>

<スタイル>

</スタイル>

<テンプレート>
    <h2>カテゴリー</h2>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    名前:"ホーム"
}
</スクリプト>

<スタイル>

</スタイル>

<テンプレート>
    <h2>個人的</h2>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    名前:"ホーム"
}
</スクリプト>

<スタイル>

</スタイル>

<テンプレート>
    <h2>ショッピングカート</h2>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    名前:"ホーム"
}
</スクリプト>

<スタイル>

</スタイル>

体{
    パディング: 0px;
    マージン: 0px;
}

計算:{
      isActive(){
        //判定 this.$route.path.indexOf(this.path)?false:true を返します
      },
      アクティブスタイル(){
        this.isActive?{color:this.activeColor}:{} を返します。
      }
    },
    方法:{
      アイテムクリック(){
        this.$router.replace(this.path)
      }
    }

       this.$route.path.indexOf(this.path) !== -1 を返します
       this.$route.path === this.path を返します

エクスポートデフォルト{
    名前:"タブバーアイテム",
    小道具:{
      パス:文字列、
      アクティブカラー:{
        タイプ:文字列、
        デフォルト: '赤'
      }
    },
    データ（）{
        戻る {}
    },