I develop with laravel9 and vue3.
My problem is simple, But path setting is not go well.
When I access url localhost:8080/tasks
This url return 404 not found and I get the following type error
GET http://localhost:8000/tasks 404 (Not Found)
I didn’t know the reason , but When I rewrite path: /tasks
to path /
, localhost:8080 return Component that I want to need.
I have following files.
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");
2
Answers
I created a project using Vue’s CLI, then proceeded to check all the relevant parts.
I took your code and applied the various changes:
main.js
, rather thanbootstrap.js
but no changes code-wiseApp.vue
, I don’t have anyHeaderComponent
but it’s should not be an issue anywayrouter/index.js
, I only changed the following for the component since it’s better to use an alias than a relative path anywayLaunching the server with
gives me some port, once followed to the
/tasks
path, I can see the component as expected.The route is properly defined too
Here is my project directory
And I don’t have any errors in the console.
Here is public github repo: https://github.com/kissu/so-v3-working-router
The following in
web.php
fixed the issue