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 相关文章推荐
贴一个在Mozilla中常用的Javascript代码
Jan 09 Javascript
JavaScript 组件之旅(一)分析和设计
Oct 28 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
JQuery选择器特辑 详细小结
May 14 Javascript
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
easyui validatebox验证
Apr 29 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
javascript防抖函数debounce详解
Jun 11 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
原生js canvas实现鼠标跟随效果
Aug 02 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
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
php无限遍历目录示例
2014/02/21 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
vue跨域解决方法
2017/10/15 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
jQuery实现简易QQ聊天框
2020/02/10 jQuery
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
python异步Web框架sanic的实现
2020/04/27 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
python 绘制场景热力图的示例
2020/09/23 Python
会计毕业生自荐信
2013/11/21 职场文书
银行实习的自我鉴定
2013/12/10 职场文书
测控技术与仪器个人求职信范文
2013/12/30 职场文书
导游词之西安骊山
2019/12/03 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python