vue底部导航的精准显示

让底部导航只显示在一级页面:

路由中的写法：

import Vue from 'vue'
import Router from 'vue-router'
//import HelloWorld from '@/components/HelloWorld'
import a from '@/components/a'
import b from '@/components/b'
import c from '@/components/c'
import d from '@/components/d'
import login from '@/components/login'

Vue.use(Router)

export default new Router({
  routes: [
    {
			path:'/a',
			component:a,
			name:'a',
			meta: {
                // 路由层级，数值越大层级越深，以此决定转场动画的前进和后退 大于前进，小于后退
                index: 0,
                showFooter: 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: {
            //判断显示隐藏，层级越大则隐藏
                index: 1,
                showFooter: false
            }
    },
  ],
  mode:"history"
})

　　app.vue中的写法：

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

　　完美！！！转载于https://www.jianshu.com/p/9517e720cbb9