モバイルプロジェクトを作成する場合、通常の状況では、第1レベルのページには下部のナビゲーションが必要であるため、一部のページでは下部のナビゲーションは必要ありません。たとえば、詳細ページには下部のナビゲーションは必要ありません。

ルーティング要素（メタ）を使用してパラメーターを設定します。
最初に下部にナビゲーションバー
を作成します。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>

二。
ルーティング構成でメタパラメータ
TabbarShowを設定すると、ページに下部のナビゲーションバーを表示する必要があるかどうかを制御できます。

import Vue from'vue '
import Router from'vue-router'

Vue.use（ルーター）;

デフォルトの新しいルーターをエクスポートします（{

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>
「./ components / Tabbar」からタブバーをインポートします。

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

ウォッチを使用してナビゲーションスイッチを監視し、
App.vueのナビゲーションバーの有無を制御します

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

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

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

</div>

</ script>
「./ 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 = distribution.pc_search_result.none-task-blog-2 _all first_rank_v2〜rank_v28-1-105664303.pc_first_rank_v2_rank_v8＆utm_term = vue％A8％83BA％AD ％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＃学習目標：

ヒント：ここで学習目標を追加できます。
例：1週間でJava入門知識を習得する

学習内容：

ヒント：ここで学習するコンテンツを追加できます。
例：
1。Java開発環境を構築します。2。Java
の基本的な文法を
習得します。3
。条件文を習得します。4。ループ文を習得します。

勉強の時間：

ヒント：ここに予定されている学習時間を追加できます。
例：
1。月曜日から金曜日の午後7時から
午後9時2.土曜日の午前9時から午前11時
3、日曜日の午後3時から午後6時

学習出力：

ヒント：ここでは、学習計画の総数がカウントされます。
例：
1。テクニカルノート2回
2.CSDNテクニカルブログ3記事3.vlog
ビデオの学習1

詳細ページに入ると、下部のナビゲーションバーは表示されません

学習内容：

勉強の時間：

学習出力：

おすすめ