如何用Vue实现底部导航的动态显示与隐藏功能？

本文共计367个文字，预计阅读时间需要2分钟。

原文：本文字例讲述了Vue实现动态显示与隐藏底部导航的方法。分享给大众供大家参考，具体如下：在日常项目中，总有一些页面需要用到底部导航，总有一些页面不需要底部导航。

改写后：本文以Vue为例，介绍实现动态显示和隐藏底部导航的方法。供大家参考，具体包括：在项目中，有些页面需要底部导航，有些页面则不需要。

本文实例讲述了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程序设计有所帮助。