当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue实现动态显示与隐藏底部导航的方法分析

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

2019年03月17日  | 移动技术网IT编程  | 我要评论

韩版孕妇装,护国寺金刚殿,沧州网站优化

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网