vue实现动态显示与隐藏底部导航的方法分析

论坛 代码下载 脚本     
开心网友   2019-2-11 18:41   45   0

本文实例讲述了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程序设计有所帮助。

分享到 :
0 人收藏
高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:7
帖子:28210
精华:0
赣州市期权网络科技公司版权所有
关于我们
联系我们
加入我们
商务合作
免责声明
积分充值
企业统一社会信用代码
积分规则
网站地图
爱文库
下属网站
官方
新浪微博
微信公众号
下载
表情包
App下载

我是论坛小米,论坛有任何问题请联系我!

发布
内容

下载期权论坛手机APP