소개
이 프로젝트에서는 vue-router 3.1.3 코드에서 v-slot API를 사용하여 라우터 링크 컴포넌트를 생성하고 여러 자식 요소를 제공할 때 컴포넌트 렌더링이 실패하는 버그를 수정하는 방법을 배우게 됩니다.
👀 미리보기
🎯 작업
이 프로젝트에서 다음을 배우게 됩니다:
vue-router 3.1.3코드에서 문제의 위치를 찾고 식별하는 방법link.js파일의 코드를 수정하여 문제를 해결하는 방법- 수정된
vue-router 3.1.3프로젝트를 다시 빌드하고 릴리스하는 방법 - 애플리케이션을 테스트하여 수정된 효과를 확인하는 방법
🏆 성과
이 프로젝트를 완료하면 다음을 수행할 수 있습니다:
- 타사 라이브러리의 문제를 해결하고 수정
- 코드 변경 후 프로젝트를 다시 빌드하고 릴리스
- 수정된 문제의 기능을 테스트하고 확인
Vue-Router 3.1.3 의 V-Slot API 문제 해결
시작하려면 다음과 같이 왼쪽에 있는 파일의 디렉토리 구조를 살펴보세요.
├── vue-router-3.1.3
├── vue.js
└── index.html
WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.
다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고친 다음, 브라우저 콘솔에서 "Console" 옵션을 열어 아래와 같이 브라우저에서 페이지를 미리 봅니다.
이 단계에서는 v-slot API를 사용하여 라우터 링크 컴포넌트를 생성하고 여러 자식 요소를 제공할 때 컴포넌트 렌더링이 실패하는 vue-router 3.1.3 코드의 문제를 수정합니다.
vue-router-3.1.3/src/components/link.js파일을 엽니다.- 다음 코드 블록을 찾습니다.
if (scopedSlot) {
if (scopedSlot.length === 1) {
return scopedSlot[0];
} else if (scopedSlot.length > 1 || !scopedSlot.length) {
if (process.env.NODE_ENV !== "production") {
warn(
false,
`RouterLink with to="${this.props.to}" is trying to use a scoped slot but it didn't provide exactly one child.`
);
}
return scopedSlot.length === 0 ? h() : h("span", {}, scopedSlot);
}
}
- 코드를 다음과 같이 업데이트합니다.
if (scopedSlot) {
if (scopedSlot.length === 1) {
return scopedSlot[0];
} else if (scopedSlot.length > 1 || !scopedSlot.length) {
if (process.env.NODE_ENV !== "production") {
warn(
false,
`RouterLink with to="${this.to}" is trying to use a scoped slot but it didn't provide exactly one child.`
);
}
return scopedSlot.length === 0 ? h() : h("span", {}, scopedSlot);
}
}
주요 변경 사항은 경고 메시지에서 this.props.to가 this.to로 대체된 것입니다.
수정된 Vue-Router 3.1.3 재빌드 및 테스트
이 단계에서는 vue-router 3.1.3 프로젝트를 다시 빌드하고 수정된 효과를 테스트합니다.
- 터미널에서
vue-router-3.1.3디렉토리를 엽니다. npm install명령을 실행하여 종속성을 설치합니다. 이 프로세스는 시간이 걸릴 수 있으므로 잠시 기다려 주십시오. (오랫동안 멈춰 있으면Ctrl+C를 눌러 프로세스를 종료한 다음 이 명령을 다시 실행하십시오.)- 모든 종속성이 성공적으로 설치되면
npm run build명령을 실행하여 프로젝트를 다시 빌드하고 릴리스합니다. - VM 상단의 "Web 8080" 옵션을 클릭하고 페이지를 수동으로 새로 고칩니다.
- 브라우저 콘솔을 열고 "TypeError: this.props is undefined" 오류가 더 이상 표시되지 않는지 확인합니다.
- 수정된
v-slot API문제로 인해 페이지가 이제 올바르게 렌더링되는지 확인합니다.
문제 해결 후 효과의 이미지는 다음과 같습니다.
요약
축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.
