HTML 문서 페이지 뒤로가기 근본 수정 및 페이지 이동 로딩 피드백 추가
- /pages/:slug HTML 문서 페이지 클라이언트 소프트 이동을 전체 페이지 이동으로 전환하는 글로벌 미들웨어 추가 - app.vue에 브랜드 컬러 기반 NuxtLoadingIndicator 상단 진행바 추가로 이동 로딩 피드백 제공 - v1.10.33 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
40
middleware/pages-html-document.global.js
Normal file
40
middleware/pages-html-document.global.js
Normal file
@@ -0,0 +1,40 @@
|
||||
/**
|
||||
* HTML 문서 모드 고정 페이지(`/pages/:slug`)로의 클라이언트 소프트 이동을 막고 전체 페이지 이동으로 전환한다.
|
||||
*
|
||||
* SPA로 소프트 진입한 뒤 원문 HTML을 받으려고 새로고침하면, 직전 문서(예: 홈)가
|
||||
* "라우터는 페이지 경로인데 URL은 홈"인 어긋난 상태로 뒤로가기 캐시에 남아 뒤로가기 시
|
||||
* 홈으로 돌아가지 못하는 문제가 있다. 클라이언트 이동 단계에서 전체 페이지 이동으로 처리하면
|
||||
* 직전 문서가 깨끗하게 유지되어 뒤로가기가 정상 동작한다.
|
||||
*
|
||||
* @param {import('#app').RouteLocationNormalized} to - 이동 대상 라우트
|
||||
* @returns {Promise<ReturnType<typeof abortNavigation> | void>} 내비게이션 중단 여부
|
||||
*/
|
||||
export default defineNuxtRouteMiddleware(async (to) => {
|
||||
if (import.meta.server) {
|
||||
return
|
||||
}
|
||||
|
||||
const nuxtApp = useNuxtApp()
|
||||
if (nuxtApp.isHydrating) {
|
||||
return
|
||||
}
|
||||
|
||||
const match = to.path.match(/^\/pages\/([^/]+)\/?$/)
|
||||
if (!match) {
|
||||
return
|
||||
}
|
||||
|
||||
const slug = decodeURIComponent(match[1])
|
||||
|
||||
let page = null
|
||||
try {
|
||||
page = await $fetch(`/api/pages/${slug}`)
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
|
||||
if (page?.renderMode === 'html_document') {
|
||||
window.location.assign(to.fullPath)
|
||||
return abortNavigation()
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user