pathMatch 가 빈 문자열일 때 올바른 경로 계산 문제 해결

소개

이 프로젝트에서는 vue-router-3.1.5 라이브러리의 버그를 수정하는 방법을 배우게 됩니다. 이 버그는 URL 경로의 매개변수를 채우는 역할을 하는 fillParams 함수와 관련이 있습니다. pathMatch 매개변수가 빈 문자열일 때, 올바른 경로 계산에 영향을 미칠 수 있습니다.

👀 미리보기

🎯 과제

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

• vue-router-3.1.5/src/util/params.js 파일에서 fillParams 함수를 찾는 방법
• 빈 pathMatch 문제에 대처하기 위해 fillParams 함수를 수정하는 방법
• 업데이트된 fillParams 함수로 vue-router 프로젝트를 다시 빌드하는 방법
• 브라우저 창을 새로 고치고 주소 표시줄의 올바른 동작을 확인하여 수정 사항을 테스트하는 방법

🏆 성과

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

• 타사 라이브러리에서 버그를 식별하고 수정
• 코드 변경 후 프로젝트를 다시 빌드
• 원하는 동작이 달성되었는지 확인하기 위해 수정 사항을 테스트

fillParams 함수 수정

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

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

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

2. VM 상단의 "Web 8080"을 열고 수동으로 새로 고칩니다. 효과는 다음과 같아야 합니다.

   

3. 위의 그림에서 주소를 복사하여 브라우저에서 새 창을 열고, 각각 "[button1]" 버튼과 "[button2]" 버튼을 클릭합니다. 주소 표시줄의 효과는 다음과 같습니다.

   

이 단계에서는 빈 pathMatch 문제를 해결하기 위해 vue-router-3.1.5/src/util/params.js 파일의 fillParams 함수를 수정합니다.

1. vue-router-3.1.5/src/util/params.js 파일을 엽니다.
2. fillParams 함수를 찾습니다.
3. if (params.pathMatch) params[0] = params.pathMatch 라인 뒤에 다음 코드를 추가합니다.

if (params.pathMatch === "") params[0] = "";

이 코드는 params.pathMatch가 빈 문자열인지 확인합니다. 그렇다면 함수는 매개변수를 채우려고 시도하는 대신 원래 path를 반환합니다.

업데이트된 fillParams 함수는 다음과 같아야 합니다.

export function fillParams(
  path: string,
  params: ?Object,
  routeMsg: string
): string {
  params = params || {};
  try {
    const filler =
      regexpCompileCache[path] ||
      (regexpCompileCache[path] = Regexp.compile(path));

    // Fix #2505 resolving asterisk routes { name: 'not-found', params: { pathMatch: '/not-found' }}
    if (params.pathMatch) params[0] = params.pathMatch;
    if (params.pathMatch === "") params[0] = "";

    return filler(params, { pretty: true });
  } catch (e) {
    if (process.env.NODE_ENV !== "production") {
      // Fix #3072 no warn if `pathMatch` is string
      warn(
        typeof params.pathMatch === "string",
        `missing param for ${routeMsg}: ${e.message}`
      );
    }
    return "";
  } finally {
    // delete the 0 if it was added
    delete params[0];
  }
}

vue-router 프로젝트 재빌드 및 테스트

이 단계에서는 브라우저 창을 새로 고쳐 수정 사항을 테스트합니다.

1. 터미널에서 vue-router-3.1.5 디렉토리를 엽니다.
2. npm install 명령을 실행하여 종속성을 설치합니다. 이 과정은 시간이 걸릴 수 있으니 잠시만 기다려주세요. (오랫동안 멈춰 있으면 Ctrl+C를 눌러 프로세스를 종료한 다음 이 명령을 다시 실행하세요.)
3. 모든 종속성이 성공적으로 설치되면 npm run build 명령을 실행하여 프로젝트를 다시 빌드하고 릴리스합니다.
4. 브라우저 창으로 돌아가 페이지를 새로 고칩니다.
5. "[button1]" 및 "[button2]" 버튼을 다시 클릭하고 주소 표시줄의 동작을 관찰합니다.

이제 pathMatch가 빈 문자열인 경우에도 주소 표시줄에 올바른 경로가 표시되어야 합니다. 문제가 해결된 후의 효과 이미지는 다음과 같습니다.

축하합니다! vue-router-3.1.5 라이브러리의 문제를 성공적으로 해결했습니다.

요약

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