Vue Router でサルートを使用するにはどうすればよいですか?

Vue Router でサブルーティングを使用するにはどうすればよいですか?

Vue Router は、Vue.js が公式に提供しているルーティングマネージャーで、フロントエンドページのルーティング機能を実装するために使用されます。これにより、アプリケーション内のページ間をジャンプできるようになり、サブルートのネストされた使用がサポートされます。この記事では、Vue Router でサブルーティングを使用する方法を詳しく紹介し、コード例を通してそれを示します。

Vue Router では、ルート設定項目を使用してルーティング ルールを定義できます。ルート配列では、サブルートをネストして宣言できます。サブルートは、親ルートの下にあるサブレベルのルートのグループを指し、よりきめの細かいページ ジャンプを実現するために使用されます。

次は、子ルーティングを使用するコード例です:

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Parent from './components/Parent.vue'
import Child from './components/Child.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Parent,
    children: [
      {
        path: 'child',
        component: Child
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

上記のコードでは、親ルーティングと子ルーティングにそれぞれ対応する 2 つのコンポーネント Parent と Child を定義します。ルート配列では、children 構成アイテムを使用して子ルートを宣言します。この例では、親ルートのパスは「/」、子ルートのパスは「child」で、それぞれ親コンポーネントと子コンポーネントに対応します。

親コンポーネント Parent で、子ルートのコンテンツをレンダリングするためのラベルを追加する必要があります。このラベルは 975b587bf85a482ea10b0a28848e78a4 です。 975b587bf85a482ea10b0a28848e78a4 タグを親コンポーネントのテンプレートに追加すると、子コンポーネントがこの位置にレンダリングされます。

以下は、親コンポーネントのコード例です。

<!-- Parent.vue -->
<template>
  <div>
    <h2>父级路由</h2>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Parent'
}
</script>

親コンポーネントのテンプレートでは、タイトルなどの他のコンテンツを追加できます。次に、975b587bf85a482ea10b0a28848e78a4 タグを通じてサブルートのコンテンツをレンダリングします。このようにして、サブルートに対応するコンポーネントが親コンポーネントに表示されます。

次は、子コンポーネントのコード例です。

<!-- Child.vue -->
<template>
  <div>
    <h3>子级路由</h3>
    <p>这是子级路由的内容。</p>
  </div>
</template>

<script>
export default {
  name: 'Child'
}
</script>

子コンポーネントのテンプレートでは、サブルートのコンテンツをカスタマイズできます。これは単なる例であり、実際のニーズに応じて、より複雑なサブルーティング コンテンツを定義できます。

最後に、main.js の VueRouter コンストラクターを使用してルーティング インスタンスを作成し、以前に定義したルーティング ルールをそれに設定します。次に、このルーティング インスタンスを Vue インスタンスに渡し、$mount メソッドを通じて Vue インスタンスをページにマウントします。

これで、コードを実行して効果を確認できます。 「/」パスにアクセスすると、親ルート Parent のコンテンツが表示され、子ルート Child のコンテンツが 975b587bf85a482ea10b0a28848e78a4 タグの位置にレンダリングされます。

要約すると、Vue Router のサブルートは、routes 配列の Children 構成項目を通じて定義できます。親ルートは、975b587bf85a482ea10b0a28848e78a4 タグを通じて子ルートのコンテンツをレンダリングします。実際の開発では、必要に応じてサブルートを柔軟に使用することで、より複雑なページジャンプやコンポーネントのネストを実現できます。

この記事が、Vue Router のサブルーティング機能の理解と使用に役立つことを願っています。ご質問や共有がございましたら、コメント欄に残してください。

以上がVue Router でサルートを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。