タブバーを切り替えVueの底面とジャンプ

tabBar.vueドキュメント、次のように書かれました：

<DIV CLASS = "タブ"> 
    < "tabBarImgで（アイテム、インデックス）"のdivクラス= "tab_item" V-のため=：キー= "インデックス" @をクリック= "switchToTab（item.path）"> 
      <IMG：SRC = "$ route.path === item.path item.icon：？item.normal" ALT = ""> 
      <スパン：クラス= "？$ route.path === item.path 'アクティブ'： ''" > {{item.title}} </スパン> 
    </ div> 
  </ div>

JSでtabBar.vue

輸出のデフォルト{ 
    名： "タブバー"、
    データ（）{ 
      リターン{ 
        tabBarImg：[ 
          { 
            パス： '/ホーム'、
            ノーマル：（ './../資産/ IMG / tab_guamai_nor_icon-xhdpi.png'）を要求し、
            アイコン： （ './../資産/ IMG / tab_guamai_sel_icon-xhdpi.png '）、必要
            タイトル：'娱乐咨询' 
          }、
          { 
            パス： '/チャット'、
            通常は：（」./../資産/ IMG /必要tab_hangqing_nor_icon-xhdpi.png '）、
            アイコン（必要' ./../資産/ IMG / tab_hangqing_sel-xhdpi.png '）、
            タイトル：'聊天' 
          }、
          { 
            パス：'/私」
            通常：必要（ './../資産/ IMG / tab_wode_nor_icon-xhdpi.png '）、
            アイコン：必要（' ./../資産/ IMG / tab_wode_sel_icon-xhdpi.png '）、
            タイトル：'我的' 
          } 
        ] 
      } 
    }、
    メソッド：{ 
      switchToTab（パス）{ 
        にconsole.log（パス）。
        。この$のrouter.replace（パス）; 
      } 
    } 
  }

次のようにルーティングコードは次のとおりです。

　　メタ：コンポーネントは、表示タブバーの底を決定するために使用されます

「VUE」からインポートヴュー
「VUE-ルータ」からインポートたvrouter 

「./../components/Home.vue」からインポートホーム。
「./../components/Chat.vue」からインポートするチャット。
「./../components/Me.vue」から私をインポートします。
「./../components/Login.vue」からインポートログイン。


Vue.use（たvrouter）。

輸出既定新たvrouter（{ 
  モード： '歴史'、
  ルート：[ 
    { 
      パス： '/ホーム'、
      コンポーネント：ホーム、
      メタ：{ 
        showTab：真
      } 
    }、
    { 
      パス： '/チャット'、
      コンポーネント：チャット、
      メタ： { 
        showTab：真
      } 
    }、
      パス： '/私'、
      コンポーネント：私、
      メタ：{ 
        showTab：真
      } 
    }、
    { 
      パス： '/ログイン'、
      コンポーネント：ログイン
    }、
    { 
      パス： '/'、
      リダイレクト： '/ホーム' 
    } 
  ] 
}）

App.vueでは、下部にあるナビゲーションバーを表示するかどうかを判断します

<タブバーV-IF = "$ route.meta.showTab"> </タブバー>

タブバーを切り替えVueの底面とジャンプ

おすすめ