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 相关文章推荐
Javascript 复制数组实现代码
Nov 26 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
Mar 17 Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
从0开始学Vue
Oct 27 Javascript
JS匿名函数类生成方式实例分析
Nov 26 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 Javascript
vue组件中的数据传递方法
May 14 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
微信小程序中weui用法解析
Oct 21 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 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两种快速排序算法实例
2015/02/15 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
PHP中的self关键字详解
2019/06/23 PHP
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
原创javascript小游戏实现代码
2010/08/19 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
解决AngualrJS页面刷新导致异常显示问题
2017/04/20 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
Angular4 反向代理Details实践
2018/05/30 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
用JS实现选项卡
2020/03/23 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
python中元类用法实例
2014/10/10 Python
python图像处理之镜像实现方法
2015/05/30 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
python中的tcp示例详解
2018/12/09 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
Python中Selenium库使用教程详解
2020/07/23 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
就业推荐表自我鉴定
2014/03/21 职场文书
常务副总经理任命书
2014/06/05 职场文书
学校标语口号大全
2015/12/26 职场文书
《开国大典》教学反思
2016/02/16 职场文书
创业计划书介绍
2019/04/24 职场文书
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android