Bagaimana untuk melompat ke sub-laluan dalam vue

Vue ialah rangka kerja bahagian hadapan yang popular yang menggunakan pendekatan berasaskan komponen untuk membina aplikasi. Penghala Vue ialah pemalam yang disediakan oleh Vue yang boleh membahagikan aplikasi kepada berbilang paparan dengan mudah dan membolehkan pengguna menavigasi antara paparan. Dalam penghala Vue, setiap paparan ialah laluan dan setiap laluan boleh mempunyai berbilang sub-laluan. Artikel ini akan memperkenalkan cara melompat sub-laluan.

1. Isytihar sub-laluan

Mengisytiharkan sub-laluan dalam penghala Vue memerlukan penggunaan laluan bersarang. Gunakan medan kanak-kanak dalam laluan induk untuk mengisytiharkan laluan kanak-kanak. Contohnya:

const router = new VueRouter({
  routes: [
    {
      path: '/parent',
      component: Parent,
      children: [
        {
          path: 'child',
          component: Child
        }
      ]
    }
  ]
})

Dalam kod di atas, kami mengisytiharkan laluan induk bernama ibu bapa dan laluan anak bernama anak. Apabila pengguna mengakses /ibubapa/anak, komponen Ibu Bapa dan Anak akan dipaparkan.

2. Lompat sub-laluan

Lompat laluan dalam Vue boleh menggunakan komponen pautan penghala atau navigasi program menggunakan objek $router. Apabila melompat sub-laluan, kita perlu menyediakan laluan penghalaan yang lengkap. Sebagai contoh, untuk melompat ke laluan kanak-kanak dalam contoh di atas, kita perlu menyediakan laluan laluan penuh / ibu bapa/anak.

Gunakan pautan penghala:

<router-link to="/parent/child">跳转到子路由</router-link>

Gunakan navigasi program:

this.$router.push('/parent/child')

Dalam kod di atas, kami menggunakan kaedah $router.push untuk melompat penghalaan.

3. Parameter lulus navigasi terprogram

Dalam amalan, kita selalunya perlu melompat ke sub-laluan dan melepasi beberapa parameter. Dalam Vue, kita boleh lulus parameter menggunakan medan params dalam navigasi program. Contohnya:

this.$router.push({ path: '/parent/child', params: { id: 1 }})

Dalam kod di atas, kami lulus parameter id dengan nilai 1. Dalam komponen sub-rute yang menerima parameter, kita boleh mendapatkan parameter melalui ini.$route.params.

export default {
  mounted() {
    console.log(this.$route.params.id) // 输出1
  }
}

4. Kesimpulan

Artikel ini memperkenalkan cara melompat sub-laluan dalam penghalaan Vue. Kami membincangkan cara mengisytiharkan sublaluan, cara menggunakan pautan penghala dan navigasi terprogram untuk melompat ke sublaluan dan cara lulus parameter. Semoga artikel ini bermanfaat kepada pemula.

Atas ialah kandungan terperinci Bagaimana untuk melompat ke sub-laluan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!