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 相关文章推荐
基于jquery的无刷新分页技术
Jun 11 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
jquery+html仿翻页相册功能
Dec 20 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 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 pack与unpack 摸板字符字符含义
2009/10/29 PHP
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
javascript脚本调试方法小结
2008/11/24 Javascript
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
JS 时间显示效果代码
2009/08/23 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
python 批量将中文名转换为拼音
2021/02/07 Python
生产车间主任的个人自我鉴定
2013/10/25 职场文书
机电一体化专业推荐信
2013/12/03 职场文书
毕业生实习鉴定
2013/12/11 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
企业消防安全制度
2014/02/02 职场文书
大型晚会策划方案
2014/02/06 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
文化宣传方案
2014/03/13 职场文书
自查自纠工作总结
2014/10/15 职场文书
给老婆的保证书
2015/01/16 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
教师节座谈会主持词
2015/07/03 职场文书
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python