在写移动端项目的时候，一般情况下一级页面是需要底部导航的，所以说就有些页面是不需要底部导航条的，比如说，详情页就不得要底部导航。

利用路由元（meta）设置参数
先创建底部的导航栏
在conponents文件夹下面创建Tabbar.vue,我用的是vant的Tabbar组件

<div class="tabbar">
    <van-tabbar v-model="active" :placeholder="true" safe-area-inset-bottom route>
        <van-tabbar-item icon="home-o" to="/label1">标签1</van-tabbar-item>
        <van-tabbar-item icon="search" to="/label2">标签2</van-tabbar-item>
        <van-tabbar-item icon="friends-o" to="/label3">标签3</van-tabbar-item>
        <van-tabbar-item icon="setting-o" to="/label4">标签4</van-tabbar-item>
    </van-tabbar>
</div>

二。
在路由的配置中设置meta参数
TabbarShow就是控制该页面需不需要显示底部导航栏的

import Vue from ‘vue’
import Router from ‘vue-router’

Vue.use(Router);

export default new Router({

routes: [
    {
        path: '/label1',
        name: 'Label1',
        component: resolve => require(['@/components/label1'], resolve),
        meta: {
            TabbarShow: true // 需要显示 底部导航
        }
    },
    {
        path: '/label2',
        name: 'Label2',
        component: resolve => require(['@/components/label2'], resolve),
        meta: {
            TabbarShow: false // 不需要显示 底部导航
        }
    },
    {
        path: '/label3',
        name: 'Label3',
        component: resolve => require(['@/components/label3'], resolve),
        meta: {
            TabbarShow: true // 需要显示 底部导航
        }
    },
    {
        path: '/label4',
        name: 'Label4',
        component: resolve => require(['@/components/label4'], resolve),
        meta: {
            TabbarShow: false // 不需要显示 底部导航
        }
    }
]

})

在App.vue中写

<div id="app">
    <!--路由出口-->
    <router-view></router-view>

    <!--引入底部导航组件 利用路由里面设置的meta参数来控制其显示-->
    <Tabbar v-if="$route.meta.TabbarShow"></Tabbar>
</div>

<///script>
import Tabbar from “./components/Tabbar”;

export default {
    name: 'App',
    components: {
        Tabbar
    },
    data() {
        return {}
    },
}

使用watch监听导航切换来控制导航栏的有无
在App.vue中

<div id="app">
    <!--路由出口-->
    <router-view></router-view>

    <!--引入底部导航组件 利用路由里面设置的meta参数来控制其显示-->
    <!--<Tabbar v-if="$route.meta.TabbarShow"></Tabbar>-->

    <Tabbar v-if="show"></Tabbar>

</div>

</script>
import Tabbar from “./components/Tabbar”;

export default {
    name: 'App',
    components: {
        Tabbar
    },
    data() {
        return {
            show: true // 控制Tabbar组件的显隐状态
        }
    },
    watch: { // 监听路由变化  跳转到Label2  和 Label4页面就隐藏导航栏
        $route (to) {
           if (to.name === 'Label2' || to.name === 'Label4' ) {
               this.show = false
           }
        }
    },
}

参考链接：
https://blog.csdn.net/weixin_37680021/article/details/105664303?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160143443119724848300520%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=160143443119724848300520&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allfirst_rank_v2~rank_v28-1-105664303.pc_first_rank_v2_rank_v28&utm_term=vue%E4%B8%AD%E5%BA%95%E9%83%A8%E5%AF%BC%E8%88%AA%E4%B8%8D%E6%83%B3%E5%9C%A8%E8%AF%A6%E6%83%85%E9%A1%B5%E6%98%BE%E7%A4%BA%E6%80%8E%E4%B9%88%E5%8A%9E&spm=1018.2118.3001.4187# 学习目标：

提示：这里可以添加学习目标
例如：一周掌握 Java 入门知识

学习内容：

提示：这里可以添加要学的内容
例如：
1、搭建 Java 开发环境
2、掌握 Java 基本语法
3、掌握条件语句
4、掌握循环语句

学习时间：

提示：这里可以添加计划学习的时间
例如：
1、周一至周五晚上 7 点—晚上9点
2、周六上午 9 点-上午 11 点
3、周日下午 3 点-下午 6 点

学习产出：

提示：这里统计学习计划的总量
例如：
1、技术笔记 2 遍
2、CSDN 技术博客 3 篇
3、学习的 vlog 视频 1 个

底部导航栏进入详情页不显示

学习内容：

学习时间：

学习产出：

猜你喜欢