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

本文实例讲述了vue实现动态显示与隐藏底部导航的方法。分享给大家供大家参考，具体如下：

在日常项目中，总有几个页面是要用到底部导航的，总有那么些个页面，是不需要底部导航的，这里列举一下页面底部导航的显示与隐藏的两种方式：

方式一：

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

?

1 2 3 4 5 6 7 8 9 10

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

2. 在App.vue页面

?

1 2 3 4 5 6

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

方式二：

使用watch监听导航切换

?

1 2 3 4 5 6 7 8 9 10

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程序设计有所帮助。

转载于:https://www.cnblogs.com/v616/p/11282823.html