vue.js の下部ナビゲーション バーに、第 1 レベルのルートを表示する方法と、サブルートが表示されない場合の解決策を教えてください。

ここで、vue.js の下部ナビゲーション バーの第 1 レベルのルートが表示され、サブルートが非表示になる問題の解決策を共有します。これは良い参考値であり、皆さんのお役に立てれば幸いです。

最近、vue サードパーティ UI MuseUI を使用して Web アプリを開発しました。その後、ナビゲーション バーのいくつかのルートで下部のナビゲーション バーを表示する必要がありますが、他のルートでは表示されません。 MuseUI 下部のナビゲーション バーは app.vue に直接読み込まれ、すべてのページにナビゲーション バーが表示されるため、この方法は現実的ではありません。その後、MuseUI の作者である GitHub に一生懸命質問しましたが、質問はできませんでした。役に立ちました。segmentfault に質問しましたが、役に立ちませんでした。質問する前に、調べたり考えたりしましたが、すべてが私を崩壊させました。考えられるエラーは、URL のルーティング、museUI の使用上のバグ、フック関数の追加など多岐にわたりましたが、どれも真実ではありませんでした。私の努力が神を動かし、私はそれを見つけたのかもしれません。解決。

router.js

const router = new VueRouter({
 mode: 'history',
 routes: [
  { path: '/first', component: firstView, meta: { navShow: true, cname: '一级页面' }, name: 'first' },
  { path: '/sub', component: subView, meta: { navShow: false, cname: '子页面' }, name: 'sub' },
 ],
});

app.vue

<Bar v-show="$route.meta.navShow">

上記は私がまとめたもので、将来皆さんのお役に立てれば幸いです。

関連記事:

Vue ドキュメントの見落とされやすいいくつかの部分の詳細な分析

Vue での Jointjs の使用方法

Vue で Baidu Maps を使用する簡単な方法についての簡単な説明

以上がvue.js の下部ナビゲーション バーに、第 1 レベルのルートを表示する方法と、サブルートが表示されない場合の解決策を教えてください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。