vue实现动态显示与隐藏底部导航的方法分析

routes: [
  {
   path: '/',
   name: 'home',
   redirect: '/home', // 默认路由添加class
   ponent: home,
   meta: {
    footShow: true, // true显示，false隐藏
   },
  },

<template>
 <div id="app">
  <router-view/>
  <foot v-if="$route.meta.footShow"></foot>
 </div>
</template>

watch: { // 监听路由变化
  $route (to, from) {
   let ThisPage = to.name;
   if (ThisPage === 'home' || ThisPage === 'healthcare' || ThisPage === 'healtharea' || ThisPage === 'personal') {
    this.footShow = true;
   } else {
    this.footShow = false;
   }
  }
 },