Vue 라우팅의 다양한 모드는 무엇입니까?

Vue 라우팅에는 해시, 기록, 추상의 세 가지 모드가 있습니다. 차이점: 1. # 문자는 해시 모드에서 URL 경로에 표시되지만 다른 모드에서는 표시되지 않습니다. 2. 해시 값이 변경되면 해시변경 이벤트가 트리거되지만 다른 모드에서는 그렇지 않습니다. 다시 로드되고 이력 기록을 저장할 수 있습니다. 이는 편리한 앞으로 및 뒤로, 다른 모드는 불가능합니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

vue 라우팅에는 실제로 세 가지 모드가 있습니다.

• Hash: URL의 해시 값을 경로로 사용합니다. 모든 브라우저를 지원합니다.

• History: HTML5 History API 및 서버 구성 이후

• Abstract: 모든 자바스크립트 실행 모드를 지원합니다. 브라우저 API가 없는 것으로 확인되면 라우팅이 자동으로 이 모드로 강제 전환됩니다.

vue-router는 기본적으로 해시 모드를 사용합니다. 즉, 다음 URL이 나타납니다. URL에 # 기호가 있으면

다음 코드를 사용하여 기록 모드로 수정할 수 있습니다.

import Vue from 'vue'
import Router from 'vue-router'
const userInfo = () => import('@/views/userInfo')
Vue.use(Router)

export default new Router({
  mode: 'history',//hash abstract
  routes: [
    {
      path: '/user-info/:userId',
      component: userInfo
    }
  ]
})

차이

해시 모드:

• # 문자가 URL 경로에 표시됩니다.

• 해시 값은 HTTP 요청에 포함되지 않습니다. 따라서 해시 값이 변경되면 페이지가 새로 고쳐지지 않습니다. 요청이 서버로 전송되지 않습니다

• 해시 값이 변경되면 해시 변경 이벤트가 트리거됩니다

기록 모드:

• The 전체 주소를 다시 불러오고 이력 기록을 저장할 수 있으며 정방향 및 역방향

• HTML5 API(기존 브라우저에서는 지원하지 않음) 및 HTTP 서버 구성을 사용하면 편리합니다. 배경 구성이 없으면 404가 나타납니다. 페이지 새로고침

nginx 구성:

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

경로 매개변수 획득

https://xxx.com//user-info/888 

this.$route.params.userId

https://xxx.com//user-info?userId=888

this.$route.query.userId

(학습 영상 공유: 웹 프론트엔드 개발, 기본 프로그래밍 영상)

위 내용은 Vue 라우팅의 다양한 모드는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!