vant Tabbar 标签栏跳转二级页面时隐藏标签栏

最新推荐文章于 2024-06-25 01:12:18 发布

前端小脑虎（鸿蒙版）

最新推荐文章于 2024-06-25 01:12:18 发布

阅读量1.1k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_59023970/article/details/129398227

文章展示了如何在Vue项目中结合VantUI库和VueRouter来实现动态显示Tabbar标签栏。关键在于为路由添加`meta`属性，并在App.vue中使用`v-if`判断来控制Tabbar的显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何使用vant就不描述了，大家肯定会的，简单点咯，直接上代码

首先在router路由里定义好标签栏要使用的路由页面，然后再里面添加：meta:{showTab:true}，作为标识符，路由有携带此标识符才显示Tabbar标签栏

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
    }
  },
]

写好后，在App.vue里使用Tabbar 标签栏，在van-tabbar标签里添加v-if判断路由是否携带了标识符

<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>