vueでサブルートを設定する方法

Vue は、MVVM パターンに基づいて設計された人気の JavaScript フレームワークで、Web アプリケーションを開発するためのシンプル、柔軟、効率的な方法を提供します。 Vue のルーティング メカニズムを使用すると、開発者は複数のページ、およびページ間のステータスや対話を簡単に管理できます。この記事では、Web アプリケーションをより適切に管理および整理するために Vue でサルートを設定する方法を紹介します。

1. Vue のサブルーティングとは何ですか?

Vue のルーティング コンポーネントには 1 つ以上のサブコンポーネントを含めることができます。子ルーティングは、親ルーティングのルーティング構成が複数の子ルーティング構成を持つことができることを意味します。 Vue のルーティング システムでは、サブルートはネスト可能です。つまり、サブルートは独自のサブルートを持つことができ、アプリケーション内のさまざまなページをより適切に編成および管理できるようになります。

2. Vue のサブルーティングを設定するにはどうすればよいですか?

1. Vue Router で親ルートを定義する

まず、Vue Router で親ルートを定義する必要があります。親ルートには複数の子ルートを含めることができます。 Vue Router コードを使用して親ルートを定義できます。

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import ParentComp from './views/ParentComp.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/parent',
      name: 'parentComp',
      component: ParentComp
    }
  ]
})

上記のコードでは、2 つのルートが定義されています。1 つはルート ルートで、もう 1 つは親ルートです。親ルートのパスは「/parent」です。

2. 親ルートのコンポーネントにサブルートを追加します

次に、親ルートのコンポーネントにサブルートを追加する必要があります。 Vue Router のネストされたルーティングを使用して、サブルートを追加できます。ネストされたルーティングは、親ルーティングのコンポーネントにサブルーティングの構成を配置します。ネストされたルーティングの定義には、パス、名前、コンポーネントが含まれます。例:

<template>
  <div class="parent-comp">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'ParentComp',
  components: {
    ChildComp1: () => import('../components/ChildComp1.vue'),
    ChildComp2: () => import('../components/ChildComp2.vue')
  },
  data () {
    return {}
  },
  children: [
    {
      path: 'childcomp1',
      name: 'childcomp1',
      component: 'ChildComp1'
    },
    {
      path: 'childcomp2',
      name: 'childcomp2',
      component: 'ChildComp2'
    }
  ]
}
</script>

<style scoped>
.parent-comp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>

上記のコードでは、ParentComp という名前のファイルがの親コンポーネントであり、2 つの子ルート定義が含まれています。子ルーティング コンポーネントの名前は ChildComp1 と ChildComp2 で、パスはそれぞれ "/parent/childcomp1" と "/parent/childcomp2" です。

3. 親コンポーネントで子コンポーネントを使用する

最後に、対応する子ルーティング ページを親コンポーネントに表示できるように、親コンポーネントで子コンポーネントを使用する必要があります。 Vue Router の コンポーネントを使用して、現在のルートの下にあるコンポーネントを表示できます。次のように、親コンポーネントのテンプレートに コンポーネントを追加できます:

<template>
  <div class="parent-comp">
    <router-view></router-view>
  </div>
</template>

このようにして、 ChildComp1 コンポーネントと ChildComp2 コンポーネントを表示します。

3. 概要

Vue Router は、特にサブルートの処理に対して、非常に柔軟なルート管理方法を提供します。 Vue ルーティングのサブルーティング メカニズムを合理的に使用することで、Vue アプリケーションのさまざまなページをより適切に編成および管理でき、Web アプリケーションのスケーラビリティと保守性を強化できます。

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