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 相关文章推荐
JS数组的赋值介绍
Mar 10 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
vue实现通讯录功能
Jul 14 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 Javascript
vue获取form表单的值示例
Oct 29 Javascript
js实现简单贪吃蛇游戏
May 15 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测试硬盘写入速度示例
2014/01/27 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
JavaScript内存管理介绍
2015/03/13 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
实例代码讲解Python 线程池
2020/08/24 Python
利用python实现汉诺塔游戏
2021/03/01 Python
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
入党思想汇报怎么写
2014/04/03 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
周年庆典答谢词
2015/01/20 职场文书
助学感谢信范文
2015/01/21 职场文书
阿凡达观后感
2015/06/10 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
人代会简报
2015/07/21 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
详解Python描述符的工作原理
2021/06/11 Python