I use laravel9 and vue3 for development.
My problem is very simple, but the path setting is not smooth.
When I visit the url localhost:8080/tasks
This URL returns 404 Not Found and I get the following type error
Get http://localhost:8000/tasks 404 (not found)
I don't know why, but when I rewrite the path: /tasks to the path /, localhost:8080 returns the components I want.
I have the 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");
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I created a project using Vue's CLI and then went ahead and checked out all the relevant parts.
I took your code and applied various changes:
main.jsinstead ofbootstrap.js, but there is no change in codeApp.vueI don't have anyHeaderComponent, but it shouldn't be a problem anywayrouter/index.jsI only changed the following content of the component since using aliases is better than using relative paths anywayStart server
gave me some ports and once I got to the
/taskspath I could see the component as expected.Routes are also correctly defined
This is my project directory
There are no errors in the console.
Here is the public github repository: https://github.com/kissu/so-v3-work-router
The following in
web.phpfixes the issueRoute::get('{any?}', function () { return view('welcome'); })->where('any', '.*');