예제에서는 $route.params.*를 사용하여 경로 데이터에 액세스했습니다. 구성 요소는 라우터와 너무 밀접하게 결합되어서는 안되며 대신 소품을 사용할 수 있습니다 : Vue CLI를 사용하여 프로젝트를 시작했을 때 vue 라우터 패키지를 포함하지 않았습니다. 이 옵션은 수동 구성 옵션을 선택하여 프로젝트를 시작하는 동안 지정할 수 있습니다. vue-라우터-스토리지 Vue 기록 라우팅 지속성에 대 한 솔루션입니다. 경고 : 현재 버전은 역사 모드를 지원합니다! 현재 기능 영구 사용자 브라우징 기록, 자동으로 다시 입력 할 때 원래 경로를 복원 (HTML5 기록 API와 결합되지 않음, 당신은 매우 기본하지만 완벽하게 작동하는 클라이언트 측 라우터를 구축 할 수 있습니다. 실제로 이를 확인하려면 이 예제 앱을 확인하십시오. 나는 같은 문제를 가지고, 그의 예를 확인 한 후 당신은 그가 같은 문제가 있음을 볼 수 있습니다. 그래서 당신은 그것을 고정하는 경우. 저에게 많은 감사를 알려주시기 바랍니다. 처음 두 줄은 vue 및 vue-라우터를 가져옵니다. 세 번째 줄은 Hello라는 구성 요소를 가져오는 것입니다. 우리는 잠시 이유를 논의 할 것이다. @는 Vue 명령줄 도구에 의해 웹 팩에서 설정 된 /src 디렉토리에 대한 좋은 별칭입니다.

이렇게 하면 페이지를 한 번 렌더링하고 응용 프로그램의 현재 컨텍스트에 따라 동적으로 표시할 수 있으므로 웹 응용 프로그램의 응답성이 향상될 수 있습니다. 이 작업을 수행하려면 서로 다른 보기 또는 페이지를 구분하는 방법이 필요합니다. SPA에서는 라우터로 수행됩니다. 다행히 Vue에는 vue 라우터라는 완전히 지원되는 자사 라우터 라이브러리가 있습니다. 이 예제에서는 브라우저에서 프로젝트를 열 때 홈 페이지를 기본 페이지로 설정합니다. 대부분의 단일 페이지 응용 프로그램의 경우 공식적으로 지원되는 vue-라우터 라이브러리를 사용하는 것이 좋습니다. 자세한 내용은 vue-router의 설명서를 참조하십시오. 위의 예제에서는 /, /login 및 /about 경로를 처리하는 URL을 기반으로 다른 보기를 보여 주며 있습니다. 예를 들어 데이터 가져오기 요청을 시작할 수 있도록 경로별 가드(동적 라우팅의 경우 RouteEnter 및 이전RouteUpdate)를 라이프 사이클 후크로 사용할 수 있습니다. 참고 : 우리의 프로젝트는 원사를 사용하고 있지만, npm을 사용하는 경우, 당신은 npm 설치 vue-라우터와 함께 설치할 수 있습니다 –저장 일단 vue-router를 설치하고 스크립트 태그를 사용하거나 Vue CLI를 통해 사용할 수 있도록, 당신은 지금 당신의 응용 프로그램에서 가져올 수 있습니다. 다음으로 Vue-라우터 플러그인을 사용하라고 Vue에게 말합니다. 마지막으로 라우터는 단일 경로로 구성됩니다.

라우터는 Vue 구성 요소를 페이지로 사용합니다. 위의 예제에서는 사용자가 /route로 이동할 때마다 Hello 구성 요소를 렌더링하려고 합니다. Page.js 또는 Director와 같이 사용하는 타사 라우터가 있는 경우 통합도 마찬가지로 쉽습니다. 다음은 Page.js를 사용하는 전체 예제입니다. 이 기사에서는 Vue.js 라우터가 Vue 템플릿을 예로 만들어 어떻게 작동하는지 설명합니다. 이 예제에서는 Vue 단일 파일 구성 요소를 사용하고 있습니다. 단일 페이지 응용 프로그램에서는 일부 작업이 성공적으로 수행된 후 리디렉션을 수행해야 하는 경우가 종종 있습니다.