我使用 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");
P粉8248896502023-12-23 18:51:18
我使用 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-工作路由器
P粉3409802432023-12-23 18:09:57
web.php
中的以下内容修复了该问题
Route::get('{any?}', function () { return view('welcome'); })->where('any', '.*');