경로 재방문 시 조기 트리거 문제 해결

소개

이 프로젝트에서는 "out-in" 전환에서 라우트를 다시 방문할 때 beforeRouteUpdate의 next() 함수가 너무 일찍 트리거되는 Vue Router v2.5.2 의 버그를 수정하는 방법을 배우게 됩니다.

👀 미리보기

🎯 과제

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

• vue-router-2.5.2/src/components/view.js 파일에서 문제의 위치를 찾고 이해하는 방법
• data.registerRouteInstance 함수를 업데이트하여 문제를 해결하는 방법
• 수정 사항으로 vue-router-2.5.2 프로젝트를 다시 빌드하는 방법
• 수정 사항을 테스트하여 문제가 해결되었는지 확인하는 방법

🏆 성과

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

• Vue Router 라이브러리에서 문제를 식별하고 수정할 수 있습니다.
• 코드 변경 후 프로젝트를 다시 빌드할 수 있습니다.
• 수정 사항을 테스트하고 확인하여 문제가 해결되었는지 확인할 수 있습니다.

문제 해결

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

├── vue-router-2.5.2
├── vue2.2.6.js
└── index.html

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

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고쳐 아래 설명된 페이지 효과를 확인합니다.

• "to /"를 클릭하면 페이지에 "This is A"가 표시됩니다.
• "to /b"를 클릭하면 페이지에 "This is B"가 표시됩니다.
• "to /"를 다시 클릭하면 페이지에 "This is"가 표시됩니다.

이 단계에서는 vue-router-2.5.2/src/components/view.js 파일의 문제를 해결합니다.

1. vue-router-2.5.2/src/components/view.js 파일을 엽니다.

2. 파일의 53 번째 줄, 즉 data.registerRouteInstance 함수를 찾습니다.

3. data.registerRouteInstance 함수를 다음과 같이 업데이트합니다.

   data.registerRouteInstance = (vm, val) => {
     // val could be undefined for unregistration
     var current = matched.instances[name];
     if ((val && current !== vm) || (!val && current === vm)) {
       matched.instances[name] = val;
     }
   };
   

   여기서의 변경 사항은 val과 matched.instances[name]이 다른지, 또는 val이 falsy 이고 matched.instances[name]이 vm과 같은지 확인하는 것입니다. 이렇게 하면 인스턴스가 실제로 변경된 경우에만 registerRouteInstance 훅이 호출되도록 보장합니다.

4. view.js 파일에 변경 사항을 저장합니다.

프로젝트 재빌드 및 테스트

이 단계에서는 vue-router-2.5.2 프로젝트를 다시 빌드하고 수정된 효과를 테스트합니다.

1. 터미널에서 vue-router-2.5.2 디렉토리를 엽니다.
2. npm install 명령을 실행하여 종속성을 설치합니다. 이 프로세스는 시간이 걸릴 수 있으므로 잠시 기다려 주십시오. (오랫동안 멈춰 있으면 Ctrl+C를 눌러 프로세스를 종료한 다음 이 명령을 다시 실행하십시오.)
3. 모든 종속성이 성공적으로 설치되면 npm run build 명령을 실행하여 프로젝트를 다시 빌드하고 릴리스합니다.
4. VM 에서 "Web 8080" 탭을 열어 업데이트된 애플리케이션을 확인합니다.
5. "to /", "to /b" 및 "to /" 버튼을 클릭하여 문제가 해결되었는지 확인합니다.

이제 라우트를 다시 방문할 때 페이지에 업데이트된 효과와 같이 올바른 내용이 표시되어야 합니다.

축하합니다! vue-router-2.5.2 버전의 코드에서 문제를 성공적으로 해결했습니다.

요약

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