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 拾漏补遗
Dec 27 Javascript
本地对象Array的原型扩展实现代码
Dec 04 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
vue实现键盘输入支付密码功能
Aug 18 Javascript
vue中的计算属性实例详解
Sep 19 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配置文件php.ini所在路径的二种方法
2014/05/26 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
Vue实现路由跳转和嵌套
2017/06/20 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
python如何求100以内的素数
2020/05/27 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
金融专业应届生求职信
2013/11/02 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
综合实践活动总结
2014/05/05 职场文书
培训科主任岗位职责
2014/08/08 职场文书
企业挂职心得体会
2014/09/10 职场文书
优秀班组事迹材料
2014/12/24 职场文书
十岁生日答谢词
2015/01/05 职场文书
入党个人总结范文
2015/03/02 职场文书
社区国庆节活动总结
2015/03/23 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
检举信的写法
2019/04/10 职场文书