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


Posted in Javascript onFebruary 11, 2019

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

Javascript 相关文章推荐
使用正则替换变量
May 05 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
详解vue高级特性
Jun 09 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 #Javascript
react配置antd按需加载的使用
Feb 11 #Javascript
react中使用css的7中方式(最全总结)
Feb 11 #Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 #Javascript
vue自定义指令实现方法详解
Feb 11 #Javascript
Vue表情输入组件 微信face表情组件
Feb 11 #Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 #Javascript
You might like
phpmyadmin的#1251问题
2006/11/25 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
python中异常捕获方法详解
2017/03/03 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
pytorch的batch normalize使用详解
2020/01/15 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
加多宝凉茶广告词
2014/03/18 职场文书
悬空寺导游词
2015/02/05 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL