The bottom navigation bar does not display when entering the details page

When writing mobile projects, under normal circumstances, first-level pages require bottom navigation, so some pages do not require bottom navigation. For example, bottom navigation is not required for details pages.

Use the routing element (meta) to set the parameters.
First create the navigation bar
at the bottom. Create Tabbar.vue under the conponents folder. I use the Tabbar component of vant

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

two.
Setting the meta parameter
TabbarShow in the routing configuration is to control whether the page needs to display the bottom navigation bar

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 // 不需要显示 底部导航
        }
    }
]

})

Write in 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 {}
    },
}

Use watch to monitor the navigation switch to control the presence or absence of the navigation bar
in 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
           }
        }
    },
}

Reference link:
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 _all first_rank_v2~rank_v28-1-105664303.pc_first_rank_v2_rank_v8&utm_term=vue%E95%83BA%AD%E4%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# Learning objectives:

Tip: You can add learning objectives here.
For example: Master Java introductory knowledge in a week

---

Learning Content:

Tip: You can add content to learn here.
For example:
1. Build a Java development environment
2. Master the basic grammar of Java
3. Master conditional statements
4. Master loop statements

---

study-time:

Tips: You can add the planned study time here.
For example:
1. Monday to Friday 7pm-9pm
2. Saturday 9am-11am
3, Sunday 3pm-6pm

---

Learning output:

Tips: The total number of study plans are counted here.
For example:
1. Technical notes 2 times
2. CSDN technical blog 3 articles
3. Learning vlog video 1