vue实现动态显示与隐藏底部导航的方法分析
作者：Mosowe
这篇文章主要介绍了vue实现动态显示与隐藏底部导航的方法,结合实例形式分析了vue.js针对导航隐藏与显示的路由配置、事件监听等相关操作技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。