Vue Router 버그 수정: 쿼리에서 객체 매개변수 가져오기

소개

이 프로젝트에서는 쿼리 매개변수에 객체를 푸시할 때 문제가 발생하는 vue-router 라이브러리의 버그를 수정하는 방법을 배우게 됩니다. 이 프로젝트는 문제 파일을 찾고, 문제를 식별하고, 버그를 해결하기 위한 솔루션을 구현하는 데 필요한 단계를 안내합니다.

👀 미리보기

vue router bug fix demo

🎯 작업

이 프로젝트에서 다음을 배우게 됩니다.

개발 환경을 설정하고 필요한 종속성을 설치하는 방법
버그가 포함된 파일을 찾고 수정할 준비를 하는 방법
resolveQuery 함수에서 버그를 수정하는 방법
수정 사항을 다시 빌드하고 테스트하여 문제가 해결되었는지 확인하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다.

타사 라이브러리의 버그를 식별하고 수정할 수 있습니다.
쿼리 매개변수에서 객체 값을 처리할 수 있습니다.
수정 사항이 예상대로 작동하는지 확인할 수 있습니다.
오픈 소스 프로젝트에 기여하고 문제 해결 및 디버깅 기술을 향상시킬 수 있습니다.

버그 수정

시작하려면 다음과 같이 왼쪽에 있는 파일의 디렉토리 구조를 살펴보세요.

├── vue-router-3.4.1
├── vue.js
└── index.html

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고치면 페이지가 표시됩니다.

브라우저 콘솔을 열고 출력을 관찰합니다. 먼저 "test" 버튼을 클릭한 다음 "pushQuery" 버튼을 클릭합니다. 브라우저의 미리보기 페이지는 다음과 같아야 합니다.

Initial Effect

vue-router v3.4.1 코드에는 this.$router.push를 사용할 때, query의 key에 해당하는 value가 객체인 경우, 문자열 "[object object]"로 읽혀 객체의 값을 올바르게 검색할 수 없게 되는 버그가 있습니다. 이 문제를 해결하십시오.

이 단계에서는 resolveQuery 함수에서 버그를 수정합니다.

파일 vue-router-3.4.1/src/util/query.js를 찾아 문제 재현을 기반으로 41 번째 줄로 이동하여 문제를 해결합니다.
castQueryParamValue 함수는 값이 객체인 경우를 처리해야 합니다. 함수를 다음과 같이 수정합니다.
```
const castQueryParamValue = (value) =>
  typeof value == "number" ? "" + value : value;
```

수정 사항 재빌드 및 테스트

이 단계에서는 vue-router-3.4.1 패키지를 다시 빌드하고 수정 사항을 테스트합니다.

터미널에서 vue-router-3.4.1 디렉토리로 이동합니다.
npm install 명령을 실행하여 종속성을 설치합니다. 이 프로세스는 시간이 걸릴 수 있으므로 잠시 기다려 주십시오. (오랫동안 멈춰 있으면 Ctrl+C를 눌러 프로세스를 종료한 다음 이 명령을 다시 실행하십시오.)
모든 종속성이 성공적으로 설치되면 npm run build 명령을 실행하여 프로젝트를 다시 빌드하고 릴리스합니다.
페이지를 다시 시작하고 "Web 8080"을 클릭하여 페이지를 봅니다.
브라우저 콘솔을 다시 열고 출력을 관찰합니다. 먼저 "Test" 버튼을 클릭한 다음 "pushQuery" 버튼을 클릭하여 수정 사항의 효과를 확인하고 테스트합니다.

fix effect demonstration

이제 수정 사항은 query의 key에 해당하는 value가 객체인 경우를 올바르게 처리해야 하며, 콘솔에 객체가 올바르게 표시되는 것을 확인할 수 있습니다.

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.