本文實例講述了vue實現動態顯示與隱藏底部導航的方法。分享給大家供大家參考，具體如下：

在日常項目中，總有幾個頁面是要用到底部導航的，總有那么些個頁面，是不需要底部導航的，這里列舉一下頁面底部導航的顯示與隱藏的兩種方式：

方式一：

1. 路由配置meta: {footShow: true, }，

routes: [  {   path: '/',   name: 'home',   redirect: '/home', // 默認路由添加class   component: home,   meta: {    footShow: true, // true顯示，false隱藏   },  },

2. 在App.vue頁面

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

方式二：

使用watch監聽導航切換

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

希望本文所述對大家vue.js程序設計有所幫助。