Hide the tab bar when the vant Tabbar tab bar jumps to the secondary page

I won’t describe how to use vant. You will definitely know how to use it. Keep it simple and upload the code directly.

First define the routing page to be used by the tab bar in the router route, and then add: meta:{showTab:true}, as an identifier, the route carries this identifier to display the Tabbar tag bar

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    meta: {
      showTab: true
    }
  },
  {
    path: '/about',
    name: 'about',
    
    component: () => import( '../views/AboutView.vue'),
    meta: {
      showTab: true
    }
  },
  {
    path: '/Information',
    name: 'Information',
    component: () => import( '../Information/Information.vue'),
    meta: {
      showTab: true
    }
  },
]

After writing, use the Tabbar label bar in App.vue, and add v-if in the van-tabbar label to determine whether the route carries an identifier

<template>
  <div id="app">
    <van-tabbar v-model="active" route v-if="$route.meta.showTab">
      <van-tabbar-item icon="wap-home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="smile-o" to="/about">服务办理</van-tabbar-item>
      <van-tabbar-item icon="chat-o" to="/Information"
        >资讯信息</van-tabbar-item
      >
      <van-tabbar-item icon="contact">我的</van-tabbar-item>
    </van-tabbar>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,//默认是第一个
    };
  },
};
</script>