Vue 프로젝트에서 #을 제거하는 방법

이 글은 주로 vue 프로젝트에서 #을 제거하는 방법과 ie9 호환성을 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 공유하고 참고하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

1. vue 프로젝트에서 액세스 주소를 제거하는 방법 #

vue2의 라우팅 구성에 모드 추가 (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. vue 라우팅 원리

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와 호환되어야 하고 백그라운드에서 액세스 주소를 엄격하게 확인하는 경우 이 모드를 사용하지 않는 것이 좋습니다. 내용에 오류나 누락이 있으면 비판하고 수정하면 됩니다~

관련 추천 :

webpack 및 vue2를 사용하여 Vue 프로젝트의 뼈대를 구축하는 방법에 대한 설명

공통 구성 요소에 대한 공유 및 Vue 프로젝트의 프레임워크 구조

vue 프로젝트의 정의 전역 변수 및 전역 함수 메서드

위 내용은 Vue 프로젝트에서 #을 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!