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

vue实现动态显示与隐藏底部导航的方法分析的更多相关文章

  1. 《vue》实现动态显示与隐藏底部导航方法!

    在日常项目中,总有几个页面是要用到底部导航的,总有那么些个页面,是不需要底部导航的,这里列举一下页面底部导航的显示与隐藏的两种方式: 其实很简单,我们在路由里面带上参数,这个参数就用来区分那个页面显示 ...

  2. ionic 进入多级目录以后隐藏底部导航栏(tabs)(完美解决方案)

    公司开始使用ionic开发项目,在此记录下把遇到的问题,网上有大牛已经把解决方法整出来了,不过记录在自己这里方便查阅. 这篇记录在有tabs的项目里,进入子层级时,底部导航还一直存在,本人是要让他只在 ...

  3. 微信小程序设置底部导航栏目方法

    微信小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家. 好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的. 我们先来看个效果图 这里,我们添加了 ...

  4. ionic 进入二级目录以后隐藏底部导航栏(tabs)

    1.在标签ion-tabs中添加:ng-class=”{‘tabs-item-hide’: $root.hideTabs}”,源码如下: <ion-tabs class="tabs-i ...

  5. UIScrollView滚动时隐藏底部导航栏问题

    - (void)scrollViewDidScroll:(UIScrollView *)scrollView { NSLog(@"開始滚动"); int currentPostio ...

  6. ionic2 跳转子页面隐藏底部导航栏

    第一种方法: 在tab里面添加一个属性[tabsHideOnSubPages]='true' <ion-tab [root]="tab1Root" [tabsHideOnSu ...

  7. vue中使用transition标签底部导航闪烁问题

    <transition :name="transitionName" :duration="{ enter: 500, leave: 0 }" > ...

  8. vue+mui+html5+ plus开发的混合应用底部导航的显示与隐藏

    1. 模板相关内容(template) <template> <div> <transition :name="transitionName"> ...

  9. Android6.0 源码修改之屏蔽导航栏虚拟按键(Home和RecentAPP)/动态显示和隐藏NavigationBar

    场景分析, 为了完全实现沉浸式效果,在进入特定的app后可以将导航栏移除,当退出app后再次将导航栏恢复.(下面将采用发送广播的方式来移除和恢复导航栏) ps:不修改源码的情况下,简单的沉浸式效果实现 ...

随机推荐

  1. 2 Vue.js基础

    1 简易计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. 信息收集【采集点OWASP CHINA】网址http://www.owasp.org.cn/

    以下部分源于 安全家 http://www.anquanjia.net.cn/newsinfo/729480.html 资源虽多,优质却少.不要被信息海迷惑的心智,新人要想入门,除了优质的系统教学资源 ...

  3. 20191103 《Spring5高级编程》笔记-第4章

    第4章 详述Spring配置和Spring Boot 4.2 管理bean生命周期 通常,有两个生命周期事件与bean特别相关:post-initialization和pre-destruction. ...

  4. 常用js方法封装使用

    // 冒泡排序 export function bubbleSort(arr) { let i = arr.length - 1; while (i > 0) { let maxIndex = ...

  5. [Git] 005 初识 Git 与 GitHub 之分支

    在 GitHub 的 UI 界面使用 Git(多图警告) 1. 建立分支 1.1 点击左上方的 Branch: master,在输入框中填入分支名,再点击下方的 Create branch 1.2 此 ...

  6. Netty解码的艺术

    什么是拆包/粘包: TCP 粘包/拆包: TCP 是一个“流”协议,所谓流,就是没有界限的一长串二进制数据.TCP 作为传输层协议并不了解上层业务数据的具体含义,它会根据TCP 缓冲区的实际情况进行数 ...

  7. sql Server20008总结

    1.like------->常用于“数据库的模糊查询” 1)即:查询某个字段中含有哪些的内容的数据库的信息列表(详情) 比如:查询学生表中名字姓是‘韩’的所有学生的信息 select * fro ...

  8. Visual Studio文件属性

    Visual Studio文件属性主要用到的为:复制到输出目录和生成操作. 复制到输出目录根据选项就可以明白是标示该文件是否输出到生成的目录地址: 生成操作则主要指该文件在执行生成时对文件执行的何种操 ...

  9. UI标签库专题十:JEECG智能开发平台 Form(form标签)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zhangdaiscott/article/details/30099121  1. Form(f ...

  10. ORM数据库的增删改查

    数据库可视化工具: https://sqlitestudio.pl/index.rvt from app01 import models def orm(request): #增加数据 # 方法1: ...