특정 경로에 대한 페이지를 렌더링하기 전에 먼저 필요한 데이터를 동기식으로 가져오고 싶습니다. 이상적으로는 페이지 구성 요소에서 데이터를 가져오고 싶지만 라우터 파일에서 데이터를 가져오는 것에 반대하지는 않습니다. 다양한 접근 방식을 읽고 시도했지만, 구성 요소를 구축하는 방법이 여러 가지가 있고 특정 기능의 사용이 다양하다는 사실에서 문제가 발생했습니다.
제 경우에는 Composition API를 사용하고
먼저 beforeRouteUpdate는 실제 경로가 업데이트될 때만 실행되며 공식 여기에 설명된 것과 같은 다른 구성요소/페이지로 이동하지 않습니다.
beforeRouteUpdate
수명주기 후크를 유발할 수 있는 예는
onBeforeRouteLeave 한 페이지에서 다른 페이지로 이동할 때 예상한 대로 완벽하게 작동합니다.
onBeforeRouteLeave
원래 질문의 경우 Nuxt가 하는 것과 같은 일종의 라우터 미들웨어 를 구현할 수 있습니다. 이렇게 하면 等待 HTTP 호출을 할 수 있고 그래야만 실제 탐색이 가능합니다. 그래서 블록 탐색 효과를 만드는 것이 거의 가능합니다.
等待
Composition API를 사용하여 작성하는 방법은 잘 모르겠지만 Options API와 완벽하게 작동한다는 것은 알고 있습니다(사용 가능한 블로그 게시물이 많이 있습니다). setup 자체는 자체 수명 주기 방식으로 작동하며 많은 일이 꽤 까다로울 것 같습니다.
setup
TLDR: 제 생각에는 좋은 라우터 미들웨어 + 페이지 래퍼(예: 레이아웃)가 귀하의 경우 완벽한 조합입니다. 거기에서 동시에 꽤 많은 페이지에 대한 관찰자를 설정할 수 있습니다.
하지만 모든 것은 자신을 어떻게 구성하고 코드를 구조화하려는지에 달려 있습니다.
스켈레톤 화면은 차단보다 빠른 느낌을 주지만 일반적으로 prefetch(기본적으로 Nuxt와 함께 제공됨)를 사용하여 힌트를 얻고 리소스가 필요하기 전에 로드할 수도 있습니다. (+ 네트워크 요청 속도를 높이기 위한 동일한 도메인의 다른 트릭)
해결책이 있습니다 - 최상위 수준 대기 사용 - https://vuejs.org/api/sfc-script-setup.html#top-level-await
아래와 같이 Suspense 구성 요소에 RouterView 구성 요소를 래핑하면 됩니다. - https://vuejs.org/guide/built-ins/suspense.html#combining-with-other-comComponents(불필요한 구성 요소를 사용하지 마세요)
주의할 점은 최초 요청 시 "로딩 화면"이 표시된다는 것입니다.
여러분이 시험해 볼 수 있도록 작은 데모를 만들었습니다. - https://github.com/ileue/vue-top-level-await-demo
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
먼저
beforeRouteUpdate는 실제 경로가 업데이트될 때만 실행되며 공식 여기에 설명된 것과 같은 다른 구성요소/페이지로 이동하지 않습니다.수명주기 후크를 유발할 수 있는 예는
으아악onBeforeRouteLeave한 페이지에서 다른 페이지로 이동할 때 예상한 대로 완벽하게 작동합니다.원래 질문의 경우 Nuxt가 하는 것과 같은 일종의 라우터 미들웨어 를 구현할 수 있습니다. 이렇게 하면
等待HTTP 호출을 할 수 있고 그래야만 실제 탐색이 가능합니다. 그래서 블록 탐색 효과를 만드는 것이 거의 가능합니다.Composition API를 사용하여 작성하는 방법은 잘 모르겠지만 Options API와 완벽하게 작동한다는 것은 알고 있습니다(사용 가능한 블로그 게시물이 많이 있습니다).
setup자체는 자체 수명 주기 방식으로 작동하며 많은 일이 꽤 까다로울 것 같습니다.TLDR: 제 생각에는 좋은 라우터 미들웨어 + 페이지 래퍼(예: 레이아웃)가 귀하의 경우 완벽한 조합입니다. 거기에서 동시에 꽤 많은 페이지에 대한 관찰자를 설정할 수 있습니다.
하지만 모든 것은 자신을 어떻게 구성하고 코드를 구조화하려는지에 달려 있습니다.
스켈레톤 화면은 차단보다 빠른 느낌을 주지만 일반적으로 prefetch(기본적으로 Nuxt와 함께 제공됨)를 사용하여 힌트를 얻고 리소스가 필요하기 전에 로드할 수도 있습니다. (+ 네트워크 요청 속도를 높이기 위한 동일한 도메인의 다른 트릭)
해결책이 있습니다 - 최상위 수준 대기 사용 - https://vuejs.org/api/sfc-script-setup.html#top-level-await
아래와 같이 Suspense 구성 요소에 RouterView 구성 요소를 래핑하면 됩니다. - https://vuejs.org/guide/built-ins/suspense.html#combining-with-other-comComponents(불필요한 구성 요소를 사용하지 마세요)
주의할 점은 최초 요청 시 "로딩 화면"이 표시된다는 것입니다.
여러분이 시험해 볼 수 있도록 작은 데모를 만들었습니다. - https://github.com/ileue/vue-top-level-await-demo