Vue Router는 매개변수를 이름으로 사용하여 경로 일치를 시도합니다.

Question

<p>내 경로에 매개변수를 사용하려고 하며 다음 경로를 만들었습니다. </p> <pre class="brush:php;toolbar:false;">export const ConsumerRoutes = [ { 경로: '/' + import.meta.env.VITE_MODULE_ADMIN_NAME + '/consumers', 메타: { Auth가 필요합니다: 사실, adminLayout: true, 모듈: '관리자', 아이콘: UserCircleIcon, nav: '소비자' }, 어린이들: [ { 길: '', 이름: '소비자', 구성요소: () => import('../../views/admin/Consumer.vue'), }, { 경로: ':id', 이름: '소비자 세부정보', 구성요소: () => import('../../views/admin/ConsumerDetails.vue'), } ], }, // { // 경로: '/' + import.meta.env.VITE_MODULE_ADMIN_NAME + '/consumers/:id', // 메타: { // 인증 필요: true, // adminLayout: true, // 모듈: '관리자', // 제외FromNav: true // }, // 어린이들: [ // { // 길: '', // 이름: '소비자 세부정보', // 구성요소: () => import('../../views/admin/ConsumerDetails.vue'), // } // ] // } ];</pre> <p>URL에 /1을 입력하려고 하면 소비자로 이동할 수 있지만 다음 오류가 발생합니다. </p> <pre class="brush:php;toolbar:false;">vue-router.mjs:810 포착되지 않음(약속 중) 오류: 다음과 일치하지 않습니다. {"name":"1","params":{}}</pre> <p>그러나 afterEach 함수에서 console.log를 사용하여 대상 경로를 인쇄하면 다음 경로 개체를 얻습니다. </p><p>그래서 내가 어느 경로로 갈지 알고 있지만 어떤 이유로 '1'이라는 경로를 찾으려고 '1'을 사용하고 있습니다. 경로 이름을 1로 변경하면 정상적으로 로드됩니다.

경로를 하위 경로에서 독립 경로로 분할해 보았지만 아무런 변화가 없었습니다.

<시간 /> <p>문제는 해결되었으며 제가 정의한 경로와는 아무런 관련이 없습니다. </p>

Answer 1

당신이 겪고 있는 문제는 Vue Router가 경로 대신 경로 이름을 기반으로 일치를 시도하기 때문에 발생할 수 있습니다.

"1"이 경로 매개변수(:id)일 것으로 예상하여 /consumers/1로 이동하려고 합니다. 그러나 Vue Router는 "1"을 경로 이름으로 해석하므로 오류 메시지가 표시됩니다.

경로 이름이 아닌 경로 경로를 사용하여 탐색하세요. afterEach 후크에서 다음 코드를 사용하세요:

으아아아

수동으로 탐색할 때는 이름이 아닌 경로('/consumers/1')를 사용하세요. 여전히 문제가 있는 경우 코드의 다른 부분으로 인한 것일 수 있습니다.

이름으로 경로를 탐색하는 샘플 코드는 다음과 같습니다.

으아아아

또한 다음은 경로를 통해 경로를 탐색하기 위한 샘플 코드입니다.

으아아아

유용해야 합니다