我使用 laravel9 和 vue3 進(jìn)行開發(fā)。
我的問題很簡單,但是路徑設(shè)定不太順利。
當(dāng)我造訪 url localhost:8080/tasks
此網(wǎng)址傳回 404 未找到,我收到以下類型錯誤
取得http://localhost:8000/tasks 404(找不到)
我不知道原因,但當(dāng)我將路徑:/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");
我使用 Vue 的 CLI 建立了一個項目,然後繼續(xù)檢查所有相關(guān)部分。
我取得了您的程式碼並應(yīng)用了各種變更:
main.js
,而不是 bootstrap.js
#,但程式碼方面沒有改變App.vue
中,我沒有任何 HeaderComponent
,但無論如何它不應(yīng)該成為問題router/index.js
中,我只更改了元件的以下內(nèi)容,因為無論如何使用別名都比使用相對路徑更好import TaskListComponent from "@/components/TaskListComponent.vue"
啟動伺服器
pnpm dev
給了我一些端口,一旦進(jìn)入 /tasks
路徑,我就可以按預(yù)期看到該組件。
路線也被正確定義
這是我的專案目錄
控制臺中沒有任何錯誤。
這裡是公共 github 儲存庫:https://github.com/kissu/so -v3-工作路由器
#web.php
中的以下內(nèi)容修正了該問題
Route::get('{any?}', function () { return view('welcome'); })->where('any', '.*');