Menggunakan Penghala Vue dengan Laravel: Panduan langkah demi langkah

Question

Saya menggunakan laravel9 dan vue3 untuk pembangunan.

Masalah saya mudah, tetapi tetapan laluan tidak lancar.

Apabila saya melawat url localhost:8080/tasks

URL ini mengembalikan 404 Not Found dan saya mendapat ralat jenis berikut

Mendapatkan http://localhost:8000/tasks 404 (Tidak Ditemui)

Saya tidak tahu mengapa, tetapi apabila saya menukar laluan: /tasks重写为路径/, localhost:8080 mengembalikan komponen yang saya mahukan.

Saya mempunyai fail berikut.

router.js

import { createRouter, createWebHistory } from "vue-router";
import TaskListComponent from "./components/TaskListComponent.vue";


const router = createRouter({
    history: createWebHistory(),
    routes: [

        {
            path: '/tasks',
            name: 'tasks.list',
            component: TaskListComponent
        }
    ]
})

export default router

App.vue

<script setup>
import HeaderComponent from "./components/HeaderComponent.vue";
</script>

<template>
    <HeaderComponent />
    <router-view></router-view>
</template>

bootstrap.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router.js"

const app = createApp(App);

app.use(router);

app.mount("#app");

Answer 1

Saya mencipta projek menggunakan Vue's CLI dan kemudian meneruskan dan menyemak semua bahagian yang berkaitan.

Saya mengambil kod anda dan menggunakan pelbagai perubahan:

• Titik masuk saya ialah main.js，而不是 bootstrap.js tetapi tiada perubahan kod secara bijak
• dalam App.vue 中，我没有任何 HeaderComponent, tetapi ia tidak sepatutnya menjadi masalah
• Dalam router/index.js Saya hanya menukar kandungan komponen berikut kerana menggunakan alias adalah lebih baik daripada menggunakan laluan relatif pula

import TaskListComponent from "@/components/TaskListComponent.vue"

Mulakan pelayan

pnpm dev

memberi saya beberapa port dan sekali dalam laluan /tasks saya dapat melihat komponen seperti yang diharapkan.

Laluan juga ditakrifkan dengan betul

Ini adalah direktori projek saya

Tiada ralat dalam konsol.

---

Berikut ialah repositori github awam: https://github.com/kissu/so-v3-working-router

Answer 2

Perkara berikut dalam

web.php membetulkan isu

Route::get('{any?}', function () {
    return view('welcome');
})->where('any', '.*');