기록 모드에서 Vue 라우팅을 새로 고칠 때 렌더링된 페이지가 반영되지 않는 문제를 해결하는 방법

이번에는 기록 모드에서 새로고침할 때 페이지를 렌더링할 때 vuerouting반영이 없는 문제를 다루는 방법을 알려드리겠습니다. 실제 전투 사례는 다음과 같습니다. 히스토리 모드에서 새로 고침 시 vue-router 중첩 라우팅(서브 라우팅)이 페이지를 렌더링할 수 없는 문제를 해결합니다.

원래는 vue-router의 해시 모드를 사용했는데, 해시 모드의 URL에는 "#" 기호가 있어야 하는데, 이는 불편해 보일 뿐만 아니라 일부 시나리오에서는 라우팅의 "#"을 파괴하기도 합니다(WeChat 공유 페이지가 변경됩니다. " #"다음 내용이 처리되므로 기록 모드를 사용한 다음 백엔드에서 nginx 구성을 변경하도록 해야 합니다.

location / { try_files $uri $uri/ /index.html; }

vue-router는 히스토리 모드를 사용하고 중첩 라우팅을 사용합니다:

const router = new Router({
 mode: 'history',
 routes: [
  {
   path: '/',
   component: mall,
   name: 'mall'
  },
  ……
  //我的银行卡
  {
   path: '/myCard',
   meta: { requireAuth: true },
   component: myCard,
   name: 'myCard',
   children:[
   { path:'', component: card},
   { path:'add', component: add}
   ]
  }
   ……
 ]
})

라우팅 및 중첩된 라우팅 페이지에 액세스할 때 표시는 정상이지만, 페이지를 새로 고칠 때 중첩된 라우팅 페이지가 비정상입니다:

페이지 스타일이 완전히 엉망입니다. 페이지 요청으로 로드된

파일을 살펴보세요. 모든 정적 파일은 404입니다.

1. 공식 문서에서 중첩 라우팅에 대한 설명을 살펴보세요.

2. 이전 예외 페이지를 다시 보면 상위 경로가 루트 디렉터리가 된 것 같습니다. 파일 경로를 확인하세요.

3. 우리가 소개한 비정상적인 파일들을 살펴보세요. index.html 파일에서 직접 참조됩니다. 즉, 루트 경로 아래에 소개됩니다. 이전 해시 모드에서는 루트 경로가 변경되지 않으므로 이러한 정적 파일을 index.html 파일에 직접 도입하는 것이 가능합니다. 그러나 히스토리 모드를 사용한 후에는 루트 경로가 고정되지 않습니다. 그렇다면 이 소개 방법은 실현 가능하지 않으며, 이것이 위의 페이지를 렌더링할 수 없는 이유입니다:

3. 문제를 해결하세요

여기서는 조금 당황스럽습니다. 처음에는 Import를 통해 기본 Vue에 정적 스타일 파일을 도입하는 것을 고려했는데 실제로 가능했지만 결국 index.html에서 정적 파일 도입 경로를 직접 수정해도 괜찮다는 것을 알았습니다. 파일: 수정 전:

<script src="./static/js/stomp.js"></script>

수정 후

<script src="/static/js/stomp.js"></script>

./는 사용자가 위치한 현재 디렉터리(상대 경로)를 나타냅니다. /는 프로젝트 루트 디렉터리인 루트 디렉터리(절대 경로, 프로젝트 루트 디렉터리)를 나타냅니다. 해시 모드의 경우 프로젝트의 루트 디렉터리인 루트 경로가 고정되어 있지만 히스토리 모드에서는 로 시작하는 중첩 경로가 루트 경로로 간주되므로 "./"를 사용하여 파일 자체가 중첩된 경로 디렉터리가 아닌 프로젝트 루트 디렉터리에 있기 때문에 파일을 찾을 수 없습니다.

요약

추신: 얼마 전에 이 문제가 발생했습니다. Baidu에서 오랫동안 검색한 결과 이 ​​질문을 하는 사람이 거의 없었고 답변한 사람도 없었습니다. 저도 여러 프론트엔드 전문가들에게 물어봤지만 여전히 이 문제를 해결하지 못했습니다. 아마도 "./"를 쓰는 데 익숙하기 때문일 것입니다. 그리고 "../"로 시작하는 경로는 정적 파일을 도입하는 방법의 문제점을 깨닫지 못하고 여러 가지 방법을 시도했지만 결국 문제는 실제로 매우 간단하다는 것을 당황스럽게 알았습니다. 기본 프레임워크를 완전히 이해하지 못했습니다!

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

node.js를 MySQL에 연결하는 방법

반응 서버 렌더링 구현 단계에 대한 자세한 설명

위 내용은 기록 모드에서 Vue 라우팅을 새로 고칠 때 렌더링된 페이지가 반영되지 않는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!