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

2019-11-19 12:09:59

字体：大中小

来源：转载

供稿：网友

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

上一篇：vue2.0实现的tab标签切换效果（内容可自定义）示例

下一篇：Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结