vue实现动态显示与隐藏底部导航的方法分析
2019-04-26 18:02
2486 查看
本文实例讲述了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程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
- js实现简单的隐藏导航菜单动态显示
- ionic2 子页面隐藏去掉底部tabs导航,子页面全占满显示方法
- vue中改变选中当前项的显示隐藏或者状态的实现方法
- Android4.2.2 动态显示隐藏屏幕底部的导航栏(对系统源码进行修改)
- Vue.js Ajax动态参数与列表显示实现方法
- ionic2 子页面隐藏去掉底部tabs导航,子页面全占满显示方法(至今为止发现的最靠谱的方法)
- jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
- Android ListView中headerview的动态显示和隐藏的实现方法
- Jquery实现动态效果的显示和隐藏控件
- Java实现按钮隐藏点击动态效果的另类方法
- javascript实现状态栏中文字动态显示的方法
- 解析android中隐藏与显示软键盘及不自动弹出键盘的实现方法
- jquery实现的固定位置下拉隐藏上拉显示悬浮导航菜单特效
- 动态显示和隐藏状态栏(包括底部虚拟按键)
- android5.1系统修改源码实现隐藏底部状态栏、隐藏通知栏、隐藏上方状态栏、永不熄屏的方法
- 多个DIV,显示一个,隐藏其他全部的实现方法
- 借用鼠标指定的对象实现动态显示和隐藏菜单
- 客户端动态实现某些项的显示与隐藏
- 基于jquery实现导航菜单高亮显示(两种方法)