이 글에서는 주로 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.html3.
단, 이 모드에서 원활한 플레이를 위해서는 백그라운드 구성 지원이 필요합니다. 우리 애플리케이션은 단일 페이지 클라이언트 애플리케이션이기 때문에 배경이 올바르게 구성되지 않은 경우 사용자가 브라우저에서 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를 사용하여 콜백을 구현하는 방법은 무엇입니까?Selenium을 사용하여 Taobao 데이터 정보 캡처
위 내용은 VUE의 ie9 호환성에 대한 자세한 해석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!