Bagaimana untuk mengkonfigurasi sub-rute vue

Vue ialah rangka kerja JavaScript yang popular untuk membina aplikasi web interaktif. Fungsi penghalaan Vue membolehkan kami membuat aplikasi halaman tunggal (SPA) Laluan yang berbeza sepadan dengan komponen yang berbeza, dan kemudian kandungan yang ditentukan dipaparkan dalam komponen. Sublaluan ialah jenis penghalaan khas dalam penghalaan Vue yang boleh disarangkan dalam laluan lain. Artikel ini akan memperkenalkan cara mengkonfigurasi sublaluan dalam Vue.

Pertama, kita perlu memastikan bahawa Vue dan kebergantungan berkaitannya telah dipasang. Sebaik-baiknya buat projek baharu menggunakan Vue CLI. Seterusnya, kita perlu mencipta komponen Vue dan menentukan laluan.

Tentukan laluan induk
Tentukan laluan dalam komponen induk (biasanya laluan akar /) untuk menyediakan bekas untuk komponen anak.

// src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Tentukan laluan kanak-kanak
Kemudian, cipta laluan yang menghala ke komponen anak dalam komponen induk.

// src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    children: [
      {
        path: 'about',
        name: 'About',
        component: () => import('../views/About.vue')
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Dalam contoh ini, "/" ialah laluan akar, yang menghala ke komponen Laman Utama. Kami mencipta sub-laluan untuk komponen Laman Utama sebagai "/about", yang menunjuk kepada komponen Perihal.

Tambahkan bekas komponen anak dalam templat komponen induk
Dalam templat komponen Laman Utama, kita perlu menambah bekas pemegang tempat untuk memaparkan komponen anak.

<template>
  <div>
    <h1>Home</h1>
    <router-view></router-view>
  </div>
</template>

Arahan "pandangan penghala" ini ialah bekas komponen kanak-kanak yang akan memaparkan komponen yang ditentukan melalui laluan kanak-kanak.

Tambah kandungan dalam templat komponen kanak-kanak
Dalam templat komponen Perihal, kami boleh menambah beberapa kandungan untuk menunjukkan kandungan itu.

<template>
  <div>
    <h1>About</h1>
    <p>This is an about page.</p>
  </div>
</template>

Kini, kami telah berjaya mengkonfigurasi sub-laluan Vue. Ujinya untuk melihat sama ada ia dipaparkan dengan betul.

Ringkasan
Terdapat tiga langkah asas untuk mengkonfigurasi sub-laluan Vue. Langkah-langkah ini termasuk:

Tentukan laluan induk: isytiharkan komponen induk dalam laluan akar dan navigasi laluannya ke komponen ini.

Tentukan sub-laluan: Buat penuding penghalaan untuk sub-komponen dalam komponen induk.

Tambahkan bekas komponen anak dalam templat komponen induk: masukkan komponen anak ke dalam elemen pemegang tempat.

Tambah kandungan dalam templat komponen kanak-kanak: Sediakan kandungan untuk komponen kanak-kanak untuk menunjukkan kefungsiannya.

Akhir sekali, apabila anda menggunakan sublaluan dalam Vue, anda mesti memastikan laluan itu betul. Laluan mesti bermula dari komponen induk, bermula dengan garis miring (/).

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