VUE의 ie9 호환성에 대한 자세한 해석

이 글에서는 주로 vue 프로젝트에서 #을 제거하는 방법과 ie9 호환성을 소개하고 참고하겠습니다.

1. vue2의 라우팅 구성에서 #

Add 모드를 제거하는 방법(vue-cli로 생성된 프로젝트는 src/router/index.js에 있음)

export default new Router({
 mode: 'history',
 routes: [
  {
   path: '/',
   name: 'menu',
   component: menu,
   children: [
    {
     path: 'organization',
     component: organization,
     children: [
      {
       path: '',
       redirect: 'organizationSub'
      },
      {
       path: 'organizationSub',
       component: organizationSub
      }
     ]
    },
    {
     path: 'user',
     component: user
    },
    {
     path: 'role',
     component: role
    }
   ]
  }
 ]
})

2. 2.1 해시 모드: vue-router의 기본 라우팅 모드입니다.

vue에서 개발한 단일 페이지 애플리케이션에는 html이 하나만 있습니다. 전환 시 URL 변경은 URL의 해시 모드를 통해 전체 URL을 시뮬레이션합니다.

2.2 기록 모드: 구성 모드: vue2의 'history'.

history.pushState API를 사용하여 URL 점프를 완료하세요

HTML5 기록 모드 공식 웹사이트 소개: https://router.vuejs.org/zh-cn/essentials/history-mode.html

3.

단, 이 모드에서 원활한 플레이를 위해서는 백그라운드 구성 지원이 필요합니다. 우리 애플리케이션은 단일 페이지 클라이언트 애플리케이션이기 때문에 배경이 올바르게 구성되지 않은 경우 사용자가 브라우저에서 http://oursite.com/user/id에 직접 액세스하면 404가 반환되어 보기에 좋지 않습니다. . 따라서 모든 상황을 포괄하는 후보 리소스를 서버 측에 추가해야 합니다. URL이 정적 리소스와 일치하지 않으면 앱이 의존하는 페이지인 동일한 index.html 페이지를 반환해야 합니다.

vue-router는 공식 웹사이트에 소개되어 있으며 배경 구성 샘플도 있습니다: https://router.vuejs.org/zh-cn/essentials/history-mode.html

4. 호환성

테스트 후 Mode: 'history'는 IE9에서 적용되지 않습니다. Vue 프로젝트가 IE9와 호환되어야 하고 백그라운드에서 액세스 주소를 엄격하게 확인하는 경우 이 모드를 사용하지 않는 것이 좋습니다. 내용에 오류나 누락이 있으면 비판과 정정을 환영합니다~위 내용은 제가 정리한 내용이니 앞으로 도움이 되셨으면 좋겠습니다.

관련 기사:

WeChat 애플릿에서 Promise를 사용하여 콜백을 구현하는 방법은 무엇입니까?

JS의 명령 모드 개념 및 사용법(자세한 튜토리얼)

Selenium을 사용하여 Taobao 데이터 정보 캡처

위 내용은 VUE의 ie9 호환성에 대한 자세한 해석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!