Halaman penghalaan dalam vue tidak dipaparkan

Apabila membangun dengan Vue, kita selalunya perlu menggunakan Penghala Vue untuk melaksanakan penghalaan halaman dan melompat. Walau bagaimanapun, semasa proses pembangunan sebenar, kadangkala kami mendapati halaman penghalaan tidak dapat dipaparkan seperti biasa, yang akan menyebabkan masalah tertentu kepada pembangunan kami. Artikel ini akan menggabungkan kes dan penyelesaian sebenar untuk membincangkan masalah penghalaan halaman tidak dipaparkan dalam Vue.

1. Ralat konfigurasi penghalaan

Apabila menggunakan Penghala Vue untuk konfigurasi penghalaan, ia biasanya perlu dilakukan dalam fail penghala/index.js. Apa yang perlu diperhatikan di sini ialah format konfigurasi penghalaan haruslah tatasusunan, dan setiap objek mewakili laluan.

Berikut ialah contoh kod untuk fail penghala/index.js ringkas:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Detail from '@/components/Detail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    }
  ]
})

Antaranya, setiap objek dalam tatasusunan laluan mengandungi tiga atribut: laluan, nama dan komponen. Sifat ini mewakili laluan, nama dan komponen laluan yang sepadan.

Jika konfigurasi penghalaan tidak betul, halaman tidak akan melompat dan dipaparkan dengan betul. Sebagai contoh, jika kita menulis nilai laluan dengan salah, seperti "path" dan bukannya "path/", laluan tidak akan dapat memadankan dengan betul komponen yang sepadan dan halaman tidak akan dipaparkan.

2. Ralat pengenalan komponen

Apabila membuat lompatan laluan, kita perlu menentukan komponen yang sepadan. Jika kami menulis nama komponen atau laluan yang salah dalam konfigurasi penghalaan, halaman tidak akan dipaparkan dengan betul.

Berikut ialah contoh:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Detail from '@/components/Detail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail1
    }
  ]
})

Dalam contoh di atas, kami menulis nama komponen Butiran yang salah, menyebabkan halaman tidak dipaparkan dengan betul. Kita perlu memastikan bahawa nama komponen atau laluan yang digunakan dalam konfigurasi penghalaan adalah betul.

3. Kekurangan laluan keluar

Walaupun tiada masalah dengan konfigurasi penghalaan dan pengenalan komponen kami, kadangkala halaman tidak akan dipaparkan dengan betul Ini mungkin kerana ia tiada dalam Apl Tambah laluan keluar penghalaan yang sepadan dalam vue.

Berikut ialah contoh kod untuk fail App.vue yang ringkas:

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: 'App'
}
</script>

<style>
// ...
</style>

Dalam contoh di atas, kami menggunakan komponen untuk memaparkan kandungan laluan yang sepadan . Jika Tanpa menambah komponen ini, halaman penghalaan tidak boleh dipaparkan dengan betul.

4. Isu versi Vue

Jika kami menggunakan versi Vue yang lebih lama, ia juga mungkin menyebabkan halaman penghalaan tidak dipaparkan dengan betul. Dalam versi yang lebih lama, mungkin terdapat beberapa pepijat dan isu yang telah dibetulkan, menyebabkan penghalaan tidak berfungsi dengan betul.

Untuk menyelesaikan masalah ini, anda boleh cuba menaik taraf kepada versi Vue terkini. Pada masa yang sama, kami juga perlu memastikan bahawa versi Penghala Vue sepadan dengan versi Vue untuk memastikan penghalaan biasa berfungsi.

Ringkasan:

Di atas adalah beberapa kemungkinan sebab dan penyelesaian untuk halaman penghalaan tidak dipaparkan dalam Vue. Dalam proses pembangunan Vue, penghalaan adalah fungsi yang agak penting Kita perlu mengambil konfigurasi penghalaan dan pengenalan komponen dengan serius untuk memastikan ketepatan program. Jika anda menghadapi masalah yang laluan tidak dapat dipaparkan, anda boleh menyelesaikan masalah dan menyelesaikannya dengan menyemak konfigurasi penghalaan, pengenalan komponen, eksport laluan dan versi Vue.

Atas ialah kandungan terperinci Halaman penghalaan dalam vue tidak dipaparkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!