Contoh untuk menerangkan cara vue melaksanakan penghalaan induk untuk melompat ke sub-laluan

Dalam Vue, kami selalunya perlu melakukan operasi lompatan penghalaan. Fungsi penghalaan Vue sangat berkuasa dan menyokong fungsi seperti penghalaan bersarang dan penghalaan dinamik. Artikel ini akan menerangkan cara untuk melompat dari laluan ibu bapa ke laluan kanak-kanak.

1. Konfigurasi sub laluan

Pertama, kita perlu mengkonfigurasi sub laluan dalam laluan induk. Dalam Vue, anda boleh menggunakan pemalam Vue Router untuk melaksanakan pengurusan dan kawalan penghalaan. Berikut ialah cara laluan anak dikonfigurasikan:

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

Dalam kod di atas, kami mula-mula mentakrifkan laluan induk /parent dan menentukan komponennya sebagai ParentComponent. Kemudian sub-laluan children ditakrifkan dalam tatasusunan /parent/child dan komponennya ditentukan sebagai ChildComponent.

2. Lompatan laluan

Dalam laluan induk, kita boleh menggunakan tag <router-link> untuk melompat ke laluan anak. Teg <router-link> akan mengendalikan lompatan penghalaan secara automatik dan menjana pautan yang sepadan. Berikut ialah contoh mudah:

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

Dalam kod di atas, kami mula-mula menggunakan teg <router-link> untuk menjana pautan. Laluan pautan ialah /parent/child, iaitu sub-laluan jalan yang kami tentukan. Apabila pengguna mengklik pautan ini, ia secara automatik akan melompat ke sub-laluan /parent/child. Pada masa yang sama, dalam laluan induk, kami menggunakan teg <router-view> untuk memaparkan komponen laluan anak.

3. Sub-laluan dengan parameter

Dalam pembangunan sebenar, kita selalunya perlu lulus parameter dalam laluan. Penghala Vue menyokong parameter lulus dalam laluan, dan juga menyokong mengakses parameter yang diluluskan melalui objek navigasi laluan. Berikut ialah contoh sub-laluan dengan parameter:

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

Dalam kod di atas, kami mentakrifkan sub-laluan dengan parameter /parent/child/:id, dengan :id mewakili nama parameter. Dalam komponen laluan kanak-kanak, kita boleh mengakses parameter yang diluluskan melalui $route.params. Berikut ialah contoh mudah:

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

Dalam kod di atas, kami mengakses parameter yang diluluskan melalui $route.params.id. Apabila pengguna mengakses /parent/child/123, nilai parameter id ialah 123.

4. Ringkasan

Artikel ini memperkenalkan secara ringkas cara melaksanakan penghalaan induk untuk melompat ke penghalaan anak dalam Vue. Dengan mentakrifkan sub-laluan dan menggunakan teg <router-link> untuk melompat ke laluan, kami boleh melaksanakan fungsi navigasi penghalaan dengan mudah dalam aplikasi Vue. Pada masa yang sama, Penghala Vue juga menyokong parameter lulus dalam penghalaan, yang sangat mudah dan praktikal.

Atas ialah kandungan terperinci Contoh untuk menerangkan cara vue melaksanakan penghalaan induk untuk melompat ke sub-laluan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!