vue が親ルーティングを実装してサブルートにジャンプする方法を説明する例

Vue では、ルーティング ジャンプ操作を実行する必要があることがよくあります。 Vue のルーティング機能は非常に強力で、ネストされたルーティングやダイナミック ルーティングなどの機能をサポートしています。この記事では、親ルートから子ルートへジャンプする方法について説明します。

1. サブルートの設定

まず、親ルート内にサブルートを設定する必要があります。 Vue では、Vue Router プラグインを使用してルーティングの管理と制御を実装できます。子ルートの構成方法は次のとおりです。

const routes = [
    {
        path: '/parent',
        component: ParentComponent,
        children: [
            {
                path: 'child',
                component: ChildComponent
            }
        ]
    }
]

上記のコードでは、まず親ルート /parent を定義し、そのコンポーネントを ParentComponent として指定します。次に、子ルート /parent/child が children 配列で定義され、そのコンポーネントが ChildComponent として指定されます。

2. ルート ジャンプ

親ルートでは、<router-link> タグを使用して子ルートにジャンプできます。 <router-link>タグはルート ジャンプを自動的に処理し、対応するリンクを生成します。以下は簡単な例です。

<template>
    <div>
        <h1>Parent Component</h1>
        <router-link to="/parent/child">Go to Child Component</router-link>
        <router-view></router-view>
    </div>
</template>

上記のコードでは、まず <router-link> タグを使用してリンクを生成します。リンク パスは / です。親/子、これは定義した子のルーティング パスです。ユーザーがこのリンクをクリックすると、サブルート /parent/child に自動的にジャンプします。同時に、親ルートで <router-view> タグを使用して子ルート コンポーネントをレンダリングします。

3. パラメータによるサブルーティング

実際の開発では、ルーティングでパラメータを渡す必要があることがよくあります。 Vue Router は、ルート内のパラメーターの受け渡しをサポートし、ルート ナビゲーション オブジェクトを介して渡されたパラメーターへのアクセスもサポートします。以下は、パラメータを持つサブルートの例です。

const routes = [
    {
        path: '/parent',
        component: ParentComponent,
        children: [
            {
                path: 'child/:id',
                component: ChildComponent
            }
        ]
    }
]

上記のコードでは、パラメータ /parent/child/:id を持つサブルートを定義します。ここで :id はパラメータ名を表します。子ルート コンポーネントでは、$route.params を通じて渡されたパラメーターにアクセスできます。簡単な例を次に示します。

<template>
    <div>
        <h1>Child Component</h1>
        <p>Id: {{ $route.params.id }}</p>
    </div>
</template>

上記のコードでは、$route.params.id を通じて、渡されたパラメーターにアクセスします。ユーザーが /parent/child/123 にアクセスすると、パラメータ id の値は 123 になります。

4. 概要

この記事では、Vue でサブルーティングをジャンプするための親ルーティングを実装する方法を簡単に紹介します。サブルートを定義し、<router-link> タグを使用してルートにジャンプすることで、Vue アプリケーションにルーティング ナビゲーション機能を簡単に実装できます。同時に、Vue Router はルーティングでのパラメーターの受け渡しもサポートしており、非常に便利で実用的です。

以上がvue が親ルーティングを実装してサブルートにジャンプする方法を説明する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。