Laravel과 함께 Vue Router 사용하기: 단계별 가이드

Question

개발에는 laravel9과 vue3을 사용합니다.

문제는 간단한데 경로설정이 원활하지 않네요.

URL에 접속했을 때 localhost:8080/tasks

이 URL은 404 Not Found를 반환하고 다음 유형 오류가 발생합니다

http://localhost:8000/tasks 404 가져오기(찾을 수 없음)

이유는 모르겠지만 경로를 변경하면 /tasks重写为路径/ localhost:8080이 내가 원하는 구성요소를 반환합니다.

다음과 같은 파일이 있습니다.

router.js

으아아아

App.vue

으아아아

bootstrap.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

Answer 1

Vue의 CLI를 이용하여 프로젝트를 생성한 후 관련 부분을 모두 확인해 봤습니다.

귀하의 코드를 가져와 다양한 변경 사항을 적용했습니다.

• 내 진입점은 main.js，而不是 bootstrap.js이지만 코드는 변경되지 않습니다
• in App.vue 中，我没有任何 HeaderComponent, 하지만 어쨌든 문제가 되지는 않습니다
• In router/index.js 어쨌든 상대 경로를 사용하는 것보다 별칭을 사용하는 것이 더 낫기 때문에 구성 요소의 다음 내용만 변경했습니다

으아아아

서버 시작

으아아아

포트를 몇 개 주었고 /tasks 경로에서 예상대로 구성요소를 볼 수 있었습니다.

경로도 올바르게 정의되었습니다

이것은 내 프로젝트 디렉토리입니다

콘솔에 오류가 없습니다.

---

공개 github 저장소는 다음과 같습니다: https://github.com/kissu/so-v3-working-router

Answer 2

web.php의 다음은 문제

를 해결합니다. 으아아아