我是靠谱客的博主 香蕉皮皮虾,最近开发中收集的这篇文章主要介绍mintui+vue2 子页面隐藏底部导航栏,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

1 router/index.js
对要隐藏的路由中加入 meta: { navShow: false}
export default new Router({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/home',
      component: Home
    },
    {
      path: '/payment',
      name: 'Payment',
      component: Payment,
      meta: { navShow: false}
    }
  ]
})

2 在底部导航栏加入 v-show="$route.meta.navShow==undefined||$route.meta.navShow"
<template>
  <div id="tab-bar" v-show="$route.meta.navShow==undefined||$route.meta.navShow">
    <mt-tabbar v-model="selected" v-show="isShow" fixed class="border-1px-top">
      <mt-tab-item id="home">
        <img :src="img1" slot="icon">首页
      </mt-tab-item>
      <mt-tab-item id="serve">
        <img :src="img2" slot="icon">服务
      </mt-tab-item>
      <mt-tab-item id="lock">
        <img :src="img3" style="margin:-20px;" width="48px">
      </mt-tab-item>
      <mt-tab-item id="post">
        <img :src="img4" slot="icon">社区
      </mt-tab-item>
      <mt-tab-item id="me">
        <img :src="img5" slot="icon">我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<style>

 

最后

以上就是香蕉皮皮虾为你收集整理的mintui+vue2 子页面隐藏底部导航栏的全部内容,希望文章能够帮你解决mintui+vue2 子页面隐藏底部导航栏所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(43)

评论列表共有 0 条评论

立即
投稿
返回
顶部