vue 底部导航栏一级页面显示二级页面不显示

需求

在一级页面显示底部导航，二级页面不显示

问题

有小伙伴说，这个很简单那啊，写个组件，在一级页面引入二级页面不应如就是了。刚开始我也是这样想，这需求很简单嘛。当我这样做了之后就会有问题，我在router-view外面套了个路由切换动画。这样会导致组件在切换动画的时候，一级页面内部的底部navbar也会跟着切换，我们来看一下效果。

从首页切换到钱包
组件切换中

很明显的看到，组件在切换的过程中导航栏不见了，是因为它是一级页面下的子组件，在发生路由切换的时候，出发路由动画。一级页面会带着子组件一起，发生动画效果。

解决

我们知道原因是因为一级页面带着子组件一起发送动画效果跑了，那我们就吧导航写在app里面，组件切换只是切换router-view里面的，外面的根本不影响。但是这样所有的页面都会有带有导航，那怎样只在一级页面显示呢。

其实很简单，我们在路由里面带上参数，这个参数就用来区分那个页面显示那个页面不显示。在vue官网里面有提到一个路由元信息的玩意，感兴趣的朋友可以看看，这里我就不多说直接贴代码了。

• router.js

routes: [
    { path: '/', component: Login, },
    { path: '/Home', component: Home, meta: { navShow: true, } },
    { path: '/Loan', component: Loan, meta: { navShow: true, } },
    { path: '/Shopping', component: Shopping, meta: { navShow: true, } },
    { path: '/My', component: My, meta: { navShow: true, } },
  ]

• app.vue

    <div class="tabbar" v-show="$route.meta.navShow" :class="$route.meta.navShow ? 'container-bot' : ''">
      <van-tabbar route active-color="#313131" inactive-color='#adadad' class="touying">
        <van-tabbar-item replace to="/Home">
          <span>首页</span>
          <img slot="icon" slot-scope="props" :src="props.active ? icon.h_active : icon.h_normal" />
        </van-tabbar-item>
        <van-tabbar-item replace to="/Loan">
          <span>钱包</span>
          <img slot="icon" slot-scope="props" :src="props.active ? icon.L_active : icon.L_normal" />
        </van-tabbar-item>

        <van-tabbar-item replace to="/Shopping">
          <span>商城</span>
          <img slot="icon" slot-scope="props" :src="props.active ? icon.S_active : icon.S_normal" />
        </van-tabbar-item>

        <van-tabbar-item replace to="/My">
          <span>我的</span>
          <img slot="icon" slot-scope="props" :src="props.active ? icon.M_active : icon.M_normal" />
        </van-tabbar-item>
      </van-tabbar>
    </div>

原理

我们在四个一级页面带上navShow字段，然后通过$route.meta.navShow获取到数据，再判断是否显示就可以。

---

更多文章访问个人博客：http://www.lfanliu.top