vue bottom precise navigation display

Let the bottom of the navigation display only one page:

Route wording:

Vue from Import 'VUE' 
Import from Router 'VUE-Router' 
// Import from the HelloWorld '@ / Components / the HelloWorld' 
Import from A '@ / Components / A' 
Import from B '@ / Components / B' 
Import from C ' @ / Components / C ' 
Import from D' @ / Components / D ' 
Import from Login' @ / Components / Login ' 

Vue.use (Router) 

Export new new default Router ({ 
  routes: [ 
    { 
			path:' / A ', 
			Component : a,		 
			name: 'a', 
			Meta: { 
                // routing hierarchy deeper level the greater the value, determined in this transition animation forward and backward greater than forward, backward less than 
                index: 0, 
                ShowFooter: to true 
            } 
			},
    {
      path: '/b',
      name: 'b',
      Component: B 
      
    }, 
    { 
      path: '/ C', 
      name: 'C', 
      Component: C 
    }, 
    { 
      path: '/ D', 
      name: 'D', 
      Component: D 
    }, 
    { 
      path: '/ Login' , 
      name: 'Login', 
      Component: Login, 
      Meta: { 
            // determines whether the display is hidden, the hidden level larger 
                index:. 1, 
                ShowFooter: to false 
            } 
    }, 
  ], 
  MODE: "History"   
})

　　app.vue in writing:

<template>
    <div id="app">
<!--根据条件控制显示隐藏-->
    <div class="body-bottom" v-show="$route.meta.showFooter">
   		<router-link to='a'>
				<div id="one">
      			<img src="../img/home.png"/>
      			<span>机构</span>
      		    </div>
			</router-link>
			<router-link to='b'>
			  <div id="two">
				<img src="../img/enjoy.png"/>
				<span>健康</span>
			  </div></router-link>
			<router-link to='c'>
				<div id="three">
				<img src="../img/msg.png"/>
				<span>消息</span>
			  </div>
			</router-link>
			<router-link to='d'>
				<div id="four">
				<img src="../img/mine.png"/><span>我的</span>	
				</div>
				</router-link>
		</div>
        <router-view></router-view>
    </div>
</template>
<script>
    export default{
        name:'app',      
    }
 
   
</script>
<style>

    
   
</style>

　　perfect! ! ! Reproduced in https://www.jianshu.com/p/9517e720cbb9