Vue脚手架开发APP时，在子页面隐藏Footer

需求描述：最近在做一款APP，其中遇到这么一个问题，在首页中点击坐标  ---->  进入地区搜索子页面

然后在首页有Footer部分，而在子页面没有，这个是怎么实现的呢？？

其实最主要的是为路由添加一个属性

App.vue

<template>
  <div id="app">
    <Header/>
    <router-view class="main"/>
    <Footer v-show="$route.meta.showFooter"></Footer>
  </div>
</template>

<script>
  import Header from './components/Header'
  import Footer from './components/Footer'

export default {
  name: 'app',
  data(){
    return {
      footer_show:true,
    }
  },
  components: {
    Header,
    Footer
  },
  methods:{

  }
}
</script>

<style>
  #app{
    width:100%;
    height:100%;
    position:relative
  }
</style>

router/index.js

import Vue from "vue"
import VueRouter from "vue-router"

import Recommend from "../pages/Recommend"
import Circle from "../pages/Circle"
import PerTailor from "../pages/PerTailor"
import News from "../pages/News"
import Mine from "../pages/Mine"
import Getphyscoord from "../pages/Recommend/Getphyscoord"

Vue.use(VueRouter);

export default new VueRouter({
    routes: [
        {
            path: '/recommend',
            component: Recommend,
            meta: {
                showFooter: true
            }
        },
        {
            path: '/circle',
            component: Circle,
            meta: {
                showFooter: true
            }
        {
            path: '/pertailor',
            component: PerTailor,
            meta: {
                showFooter: true
            }
        },
        {
            path: '/news',
            component: News,
            meta: {
                showFooter: true
            }
        },
        {
            path: '/mine',
            component: Mine,
            meta: {
                showFooter: true
            }
        },
        {path: "/getphyscoord", component: Getphyscoord},
        {path: '/', redirect: "/recommend"}
    ]
})

在路由中只有添加了

meta: {
   showFooter: true
}

此属性的页面才会显示Footer组件，未加则自动会隐藏Footer组件