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

 更新时间:2019年02月11日 09:56:30   作者: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程序设计有所帮助。

相关文章

  • vue实现可以快进后退的跑马灯组件

    vue实现可以快进后退的跑马灯组件

    这篇文章主要为大家详细介绍了vue编写一个可以快进后退的跑马灯组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vuejs实现ready函数加载完之后执行某个函数的方法

    vuejs实现ready函数加载完之后执行某个函数的方法

    这篇文章主要介绍了vuejs实现ready函数加载完之后执行某个函数的方法,需要的朋友可以参考下
    2018-08-08
  • Vue源码学习记录之手写vm.$mount方法

    Vue源码学习记录之手写vm.$mount方法

    在我们开发中,经常要用到Vue.extend创建出Vue的子类来构造函数,通过new 得到子类的实例,然后通过$mount挂载到节点,今天通过本文给大家讲解手写vm.$mount方法 ,感兴趣的朋友一起看看吧
    2022-11-11
  • vue element-ui如何在el-tabs组件最右侧添加按钮

    vue element-ui如何在el-tabs组件最右侧添加按钮

    这篇文章主要介绍了vue element-ui如何在el-tabs组件最右侧添加按钮问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vue事件监听函数on中的this指针域使用

    vue事件监听函数on中的this指针域使用

    这篇文章主要介绍了vue事件监听函数on中的this指针域使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vuecli中chainWebpack的常用操作举例

    vuecli中chainWebpack的常用操作举例

    在项目开发中我们难免碰到需要对webpack配置更改的情况,下面这篇文章主要给大家介绍了关于vuecli中chainWebpack的常用操作举例,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • 分享一个精简的vue.js 图片lazyload插件实例

    分享一个精简的vue.js 图片lazyload插件实例

    本篇文章主要介绍了分享一个精简的vue.js 图片lazyload插件实例。非常具有实用价值,需要的朋友可以参考下。
    2017-03-03
  • vue如何根据网站路由判断页面主题色详解

    vue如何根据网站路由判断页面主题色详解

    这篇文章主要给大家介绍了关于vue如何根据网站路由判断页面主题色的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • vue实现拍照或录像的示例代码

    vue实现拍照或录像的示例代码

    这篇文章主要为大家详细介绍了如何利用vue实现拍照或录像的功能,文中的示例代码讲解详细,具有一定的参考价值,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-11-11
  • vue模版编译详情

    vue模版编译详情

    本文的初衷是想让更多哎学习的人知道并了解vue模版编译,所以文中主要以阶段流程为主,不会涉及过多的底层代码逻辑,需要的朋友可以参考一下
    2021-09-09

最新评论