vue 라우터 문제, 기록 모드가 두 번째 계층에서 작동하지 않음

vue 라우터 문제, 기록 모드가 두 번째 계층에서 작동하지 않음

나는 vuejs 프로젝트를 가지고 있다. vue 라우터를 사용하는 나는 내 웹사이트를 위해 대시보드를 만들었고 그것을 위한 두 번째 라우터를 추가하고 싶었다.

import Vue from 'vue'
import Router from 'vue-router'
import Index from "@/views/Admin/Index.vue";
import ContactIndex from "@/views/Admin/Contact/Index.vue";

Vue.use(Router)

const router = new Router({
    mode: "history",
    routes: [{
            path: '/admin',
            name: 'admin',
            component: Index,
            meta: {
                requireAuth: true
            }
        },
        {
            path: '/admin/contact',
            name: 'contact',
            component: ContactIndex,
            meta: {
                requireAuth: true
            }
        }
    ]
})
export default router;

문제는 브라우저에서 수동으로 "/admin/messages"라고 말하거나 페이지를 새로 고쳤을 때 연락처가 로드되지 않아 404 오류가 발생했다는 것이다.

그러나 해당 주소에 연결된 라우터 링크 태그를 클릭하면 의도한 대로 작동함

어떻게 하면 고칠 수 있을까?

개발 환경에서 webpack-dev-server를 사용하여 앱을 실행하면 추가가 필요함historyApiFallback: true웹 팩 구성 파일의 devServer 지원

화면과 콘솔에서 아무것도 보이지 않는 경우 서버 구성에 몇 가지 문제가 있어야 한다(https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations).

디버깅하려면 모든 경로를 잡을 수 있는 경로가 있어야 한다.다음 경로를 경로에 추가하십시오.

{
  path: '*',
  component: function(resolve) {
    require(['path/to/NotFoundComponent.vue'], resolve);
  }
}

URL은 이 구성 요소를 로드한다.이제 당신은 어떤 실수를 했는지 확인할 수 있다.

참조URL: https://stackoverflow.com/questions/56211437/problem-with-vue-router-history-mode-not-working-on-second-layer