VUE底正確なナビゲーション表示

ナビゲーション表示のみ1ページの一番下にしてみましょう：

ルート文言：

インポート'VUE'からVueの
ルータ'VUE-ルータ'からインポートし
たHelloWorld '@ /コンポーネント/ HelloWorldの'から//インポート
'@ /コンポーネント/ A'からインポート
Bからインポート'@ /コンポーネント/ B' 
Cからのインポート" @ /コンポーネント/ C ' 
Dからインポート' @ /コンポーネント/ D ' 
ログインからインポート' @ /コンポーネント/ログイン' 

Vue.use（ルータ）

エクスポート新しい新しいデフォルトルータ（{ 
  ルート：[ 
    { 
			パス：' / A」、
			コンポーネント：		 
			名前：「A」、
			メタ：{ 
                //ルーティング階層より深いレベルより下位未満前方より前後大きいこの遷移アニメーション、で求めた値、より大きな
                インデックス：0、
                ShowFooter：真へ
            } 
			}、
    {  
      パス： '/ B'、
      名： 'B'、 
      コンポーネント：B 
      
    }、
    { 
      パス： '/ C'、
      名前： 'C'、
      コンポーネント：C 
    }、
    { 
      パス： '/ D'、
      名前： 'D'、
      コンポーネント：D 
    }、
    { 
      パス： '/ログイン'、
      名前： 'ログイン'、
      コンポーネント：ログイン、
      メタ：{ 
            //表示が隠されているか否かを判断する、隠されたレベルより大きな
                インデックス:. 1、
                ShowFooter：偽へ
            } 
    } 
  ]、
  MODE： "歴史"   
}）

　　書面でのapp.vue：

<テンプレート> 
    の<divのid = "アプリ"> 
<！ -根据条件控制显示隐藏- > 
    <divのクラス= "ボディ下部に" V-ショー= "$ route.meta.showFooter"> 
   		<ルータリンクへ= ''> 
				の<divのid = "1"> 
      			<IMG SRC = "../ IMG / home.png" /> 
      			<span>を机构</ span>を
      		    </ div> 
			</ルータ・リンク> 
			<router- = 'B'>へのリンク
			  の<divのid = "2"> 
				<IMG SRC = "../ IMG / enjoy.png" /> 
				<スパン>健康</ span>を
			  </ div> </ルータリンク> 
			<ルータリンク= 'C'へ> 
				の<divのid = "3"> 
				<IMG SRC = "../ IMG / msg.png "/> 
				<span>の消息</ span>を
			  </ div> 
			</ルータ・リンク> 
			=と<ルータリンク'D'> 
				の<divのid =" 4" >
				<IMG SRC = "../ IMG / mine.png" /> <span>を我的</ span>を	 
				</ div> 
				</ルータ・リンク> 
		</ div> 
        <ルータビュー> </ルータビュー> 
    </ DIV> 
</テンプレート> 
<スクリプト> 
    輸出デフォルト{ 
        名： 'アプリ'、       
    } 
 
   
</ SCRIPT> 
<スタイル> 

    
   
</スタイル>

　　パーフェクト！！！で再現https://www.jianshu.com/p/9517e720cbb9