在 Laravel 中使用 Vue 路由器：逐步指南

Question

我使用 laravel9 和 vue3 進行開發。

我的問題很簡單，但是路徑設定不太順利。

當我造訪 url localhost:8080/tasks

此網址傳回 404 未找到，我收到以下類型錯誤

取得http://localhost:8000/tasks 404（找不到）

我不知道原因，但當我將路徑：/tasks重寫為路徑/時，localhost:8080傳回我想要需要的元件。

我有以下文件。

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

我使用 Vue 的 CLI 建立了一個項目，然後繼續檢查所有相關部分。

我取得了您的程式碼並應用了各種變更：

• 我的入口點是 main.js，而不是 bootstrap.js#，但程式碼方面沒有改變
• 在 App.vue 中，我沒有任何 HeaderComponent，但無論如何它不應該成為問題
• 在 router/index.js 中，我只更改了元件的以下內容，因為無論如何使用別名都比使用相對路徑更好

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

啟動伺服器

pnpm dev

給了我一些端口，一旦進入 /tasks 路徑，我就可以按預期看到該組件。

路線也被正確定義

這是我的專案目錄

控制台中沒有任何錯誤。

---

這裡是公共 github 儲存庫：https://github.com/kissu/so -v3-工作路由器

#

Answer 2

web.php 中的以下內容修正了該問題

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