Utiliser Vue Router avec Laravel : un guide étape par étape

Question

J'utilise laravel9 et vue3 pour le développement.

Mon problème est simple, mais le paramétrage du chemin n'est pas fluide.

Quand je visite l'url localhost:8080/tasks

Cette URL renvoie 404 Not Found et j'obtiens l'erreur de type suivante

Obtention de http://localhost:8000/tasks 404 (introuvable)

Je ne sais pas pourquoi, mais quand je change de chemin : /tasks重写为路径/, localhost:8080 renvoie le composant que je veux.

J'ai les fichiers suivants.

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

J'ai créé un projet à l'aide de la CLI de Vue, puis j'ai vérifié toutes les parties pertinentes.

J'ai pris votre code et appliqué diverses modifications :

• Mon point d'entrée est main.js，而不是 bootstrap.js mais aucun changement de code
• en App.vue 中，我没有任何 HeaderComponent, mais ça ne devrait pas poser de problème de toute façon
• Dans router/index.js J'ai uniquement modifié le contenu suivant du composant, car de toute façon, il est préférable d'utiliser des alias que d'utiliser des chemins relatifs

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

Démarrez le serveur

pnpm dev

m'a donné quelques ports et une fois dans le chemin /tasks j'ai pu voir le composant comme prévu.

Les itinéraires sont également correctement définis

Voici mon répertoire de projets

Aucune erreur dans la console.

---

Voici le référentiel github public : https://github.com/kissu/so-v3-working-router

Answer 2

Ce qui suit dans

web.php résout le problème

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