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