Lompat laluan Vue tidak dimuatkan

Dalam aplikasi satu halaman Vue, adalah perkara biasa untuk menggunakan penghalaan untuk lonjakan halaman. Tetapi kadangkala kita menghadapi situasi sedemikian: apabila melompat ke halaman, kandungan halaman tidak dimuatkan dan hanya halaman kosong dipaparkan. Keadaan ini biasanya disebabkan oleh konfigurasi penghalaan atau isu rujukan komponen Vue.

1. Isu konfigurasi penghalaan

Apabila penghalaan melompat, kita perlu mendaftarkan laluan yang sepadan dalam fail konfigurasi penghalaan Vue dan nyatakan komponen yang sepadan dengan laluan itu. Jika penghalaan tidak dikonfigurasikan dengan betul, kandungan halaman lompat mungkin tidak dimuatkan.

Mula-mula, pastikan Vue dan Vue Router diperkenalkan dengan betul dalam fail konfigurasi penghalaan:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

Kemudian, konfigurasikan laluan:

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

Dua laluan ditakrifkan dalam tatasusunan laluan di sini , sepadan dengan laluan akar dan /tentang laluan, masing-masing, sepadan dengan komponen Laman Utama dan Perihal.

Jika halaman tidak boleh dimuatkan, anda boleh menyemak isu berikut secara amnya:

(1) Adakah laluan fail konfigurasi penghalaan betul? (2) Adakah penghalaan dalam fail konfigurasi penghalaan tidak betul , seperti ralat laluan atau ralat rujukan komponen

(3) Sama ada fail komponen diperkenalkan dengan betul

Masalah rujukan komponen Vue

2. Dalam Vue, komponen tersebut ialah Views yang digunakan untuk membina aplikasi satu halaman. Jika fail komponen tidak diperkenalkan dengan betul, atau kod dalam komponen tidak betul, halaman mungkin tidak dimuatkan dengan betul.

Masalah rujukan komponen biasa adalah seperti berikut:

(1) Ralat laluan komponen

Dalam komponen Vue, rujukan komponen dibuat melalui pernyataan import. Jika laluan komponen salah, komponen tidak akan dimuatkan dengan betul.

(2) Ralat nama komponen

Dalam komponen Vue, nama komponen didaftarkan melalui kaedah Vue.component(). Jika nama komponen salah, komponen tidak akan dimuatkan dengan betul.

(3) Ralat kod komponen

Ralat penulisan kod komponen juga boleh menyebabkan halaman gagal dimuatkan dengan betul. Contohnya, jika teg templat komponen tidak ditutup dengan betul, halaman tersebut akan kelihatan kosong.

Anda perlu memberi perhatian kepada perkara di atas apabila membangunkan aplikasi satu halaman menggunakan Vue. Dengan menyemak konfigurasi penghalaan dan rujukan komponen, kami berjaya menyelesaikan isu halaman tidak dimuatkan.

Atas ialah kandungan terperinci Lompat laluan Vue tidak dimuatkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!