vue-router 예제

Количество просмотров: 28

Автор Antonenko Andrii в . Опубликовано Без рубрики

이것은 vue-라우터와 함께 사용할 수있는 속성 및 방법의 목록입니다 : Vue.use (vueg)를 추가하면 vue-라우터가 전환 효과가 있습니다. vue-router를 설치하고 스크립트 태그를 사용하거나 Vue CLI를 통해 사용할 수 있게 되면 이제 앱에서 가져올 수 있습니다. Vue 명령줄 도구의 좋은 점은 vue-router를 연결한다는 것입니다. 작동 방식을 더 잘 이해하기 위해 생성된 상용구를 살펴볼 수 있습니다. 열기 /src/router/index.js 위의 예제에서는 /, /login 및 /about 경로를 처리하는 URL을 기반으로 다른 보기를 보여 주습니다. 나는 같은 문제를 가지고, 그의 예를 확인 한 후 당신은 그가 같은 문제가 있음을 볼 수 있습니다. 그래서 당신은 그것을 고정하는 경우. 저에게 많은 감사를 알려주시기 바랍니다. HTML5 기록 API와 결합하면 매우 기본적이지만 완벽하게 작동하는 클라이언트 측 라우터를 빌드할 수 있습니다.

실제로 이를 확인하려면 이 예제 앱을 확인하십시오. vue-router는 더 진보 된 매개 변수와 방법을 가지고 있지만, 우리는이 그 동안이 섹션으로 점프하지 않습니다, 이것은 당신이 vue-라우터와 함께 사용할 수있는 속성 및 방법의 목록입니다 : 참고 : 우리의 프로젝트는 원사를 사용하고 있지만, 당신은 npm을 사용하는 경우, 당신은 w를 설치할 수 있습니다 ith npm vue-router 설치 —save 단일 페이지 응용 프로그램에서, 우리는 종종 우리가 몇 가지 작업이 성공적으로 수행 된 후 리디렉션을 수행해야 하는 상황에 직면. 라우터 개체를 사용하여 프로그래밍 방식으로 경로를 리디렉션할 수 있습니다. 예를 들어 사용자가 성공적으로 로그인하면 프로그래밍 방식으로 홈 경로로 리디렉션해야 합니다. 다음 예제를 살펴보겠습니다. 예제에서 참조, 우리는 VueRouter 생성자에 경로 배열을 전달 합니다. 이 배열의 각 경로에는 경로 및 구성 요소 매개 변수가 있습니다. Vue 라우터는 vue-라우터라는 패키지와 함께 npm을 통해 사용할 수 있습니다.

vue-router에는 고급 매개 변수와 메서드가 있지만 이 시점에서이 섹션으로 점프하지 는 않습니다. 이렇게 하면 페이지를 한 번 렌더링하고 응용 프로그램의 현재 컨텍스트에 따라 동적으로 표시할 수 있으므로 웹 응용 프로그램의 응답성이 향상될 수 있습니다. 이 작업을 수행하려면 서로 다른 보기 또는 페이지를 구분하는 방법이 필요합니다. SPA에서는 라우터로 수행됩니다. 다행히 Vue에는 vue 라우터라는 완전히 지원되는 자사 라우터 라이브러리가 있습니다. 이 예제에서는 Vue 단일 파일 구성 요소를 사용하고 있습니다. 이 예제에서는 브라우저에서 프로젝트를 열 때 홈 페이지를 기본 페이지로 설정합니다. 예제에서는 $route.params.*를 사용하여 경로 데이터에 액세스했습니다. 구성 요소는 라우터와 너무 밀접하게 결합되어서는 안되며 대신 소품을 사용할 수 있습니다: 경로별 가드(이전RouteEnter 및 동적 라우팅의 경우 RouteUpdate 이전)를 라이프 사이클 후크로 사용할 수 있으므로 데이터 가져오기 요청을 시작할 수 있습니다.

예제.

Другие записи раздела:

  • 자바 soap client 예제 (0)
    j$k560945j$kXML 웹 서비스(JAX-WS)용 Java API는 SOAP(단순 개체 액세스 […]
  • Modèle lettre demande de sponsors (0)
    j$k395992j$kAccédez aux propositions de parrainage de […]
  • java quartz 예제 (0)
    j$k568743j$k모든 예제에는 예제를 실행하는 UNIX/Linux 셸 스크립트와 Windows 배치 […]
  • javacv 다운로드 (0)
    j$k502616j$k. . API를 사용 하는 방법에 대 한 자세한 내용은 현재 설명서가 없기 때문에 […]
  

Трекбэк с Вашего сайта.