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

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

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

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

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

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

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

<template>
  <div>
    <header>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/contact">Contact</router-link>
    </header>

    <main>
      <router-view name="home"></router-view>
      <router-view name="about"></router-view>
      <router-view name="contact"></router-view>
    </main>
  </div>
</template>

<script>
export default {
  name: 'ParentComponent',
  components: {}
}
</script>

上記のコードでは、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 サイトの他の関連記事を参照してください。