vueで親ルートに子ルートを表示する方法

Vue.js は、単一ページの Web アプリケーションを構築するための最新の JavaScript フレームワークです。ルーティングなどの便利な機能を提供します。 Vue Router を使用すると、アプリケーション内のナビゲーションと状態を簡単に管理できます。

Vue ルーターでは、ルートはツリー構造に編成されます。親ルートといくつかの子ルートを作成し、それらをグループ化します。このようにして、さまざまなページ パーツをまとめて整理し、メイン アプリケーションのさまざまなページに表示できます。

通常、子ルートは親ルートには表示されません。代わりに、それらを組み合わせて、最終的にメイン アプリケーションのルート ルートにレンダリングします。このプロセスは、Vue ルーティングの「名前付きビュー」機能を通じて実現できます。

名前付きビューは、単一のルーティングされたコンポーネントで複数のビューをレンダリングできるようにする Vue ルーター機能です。この場合、各ビューには一意の名前が付けられ、親コンポーネントで使用できます。

名前付きビューを使用すると、親ルーティング コンポーネント内の特定の位置に子ルーティング コンポーネントをレンダリングできます。この場所は、同じ名前の名前付きビュー タグによって識別されます。

たとえば、Home、About、Contact の 3 つの子ルートを含む親ルートがあるとします。次のコードを使用してこれらを組み合わせることができます:

上記のコードでは、3 つの名前付きビュー タグを使用し、「home」、「about」、「contact」という名前を付けています。この名前は、props を使用して子コンポーネントに渡し、子コンポーネント内で使用できます。

次に、子コンポーネント内で、ルート構成オブジェクトを使用して、どの名前付きビューでどのコンポーネントをレンダリングするかを指定できます。例:

const router = new VueRouter({ routes: [ { path: '/', components: { default: HomeComponent, home: SidebarComponent } }, { path: '/about', components: { default: AboutComponent, about: SidebarComponent } }, { path: '/contact', components: { default: ContactComponent, contact: SidebarComponent } } ] })

上記のコードでは、子ルートごとに名前付きビューを指定しました。たとえば、「ホーム」ルートでは、「サイドバー」コンポーネントを使用し、それらを「ホーム」という名前のビューに配置しました。同様に、「about」ルートと「contact」ルートでそれらを使用し、応答の名前付きビューに入れます。

つまり、Vue.js のルーターを使用すると、アプリケーション内のナビゲーションと状態を簡単に管理できます。名前付きビューを使用すると、親ルーティング コンポーネントの特定の場所に子ルーティング コンポーネントをレンダリングできます。これにより、複雑な単一ページのアプリケーションを作成し、明確かつ組織的な方法で管理できるようになります。

以上がvueで親ルートに子ルートを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。