VUE移动端指定页面隐藏底部导航条

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

利用路由元（meta）设置参数

先创建底部的导航栏
在conponents文件夹下面创建Tabbar.vue,我用的是vant的Tabbar组件

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

<script>
    export default {
        name: "Tabbar",
        data(){
            return {
                active: 2
            }
        }
    }
</script>

<style scoped>

</style>

在路由的配置中设置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中写

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

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

<script>
    import Tabbar from "./components/Tabbar";

    export default {
        name: 'App',
        components: {
            Tabbar
        },
        data() {
            return {}
        },
    }
</script>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    #app {
        padding-bottom: 50PX;
    }
</style>

如图：
label1页面

• label1页面有底部导航栏
• label2页面没有底部导航栏
• label3页面有底部导航栏
• label1页面没有有底部导航栏

使用watch监听导航切换来控制导航栏的有无

在App.vue中

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

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

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

    </div>
</template>

<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
               }
            }
        },
    }
</script>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    #app {
        padding-bottom: 50PX;
    }
</style>