Vue에서 페이지 역전송 값의 간단한 구현 방법 공유

이 기사에서는 주로 Vue에서 페이지 역방향 전송 값을 구현하는 간단한 방법을 공유합니다. 우리 모두는 Vue가 단일 페이지 애플리케이션이고 가벼우며 데이터를 반복적으로 다운로드하지 않는다는 것을 알고 있습니다. 한 페이지에서 다른 페이지로 이동할 때 원본 페이지의 Vue 인스턴스와 관련 데이터가 파괴됩니다. 값을 역전송하려면 작동 개체와 해당 속성 중 일부를 찾아야 합니다.

【요구 사항】

　페이지는 A -> B로 진행됩니다. 사용자가 B에서 작업을 실행하고 일부 데이터를 온라인에서 찾고 있던 A 페이지로 다시 가져옵니다. 오랫동안 질문하는 사람만 봤지만 항상 좋은 답변을 찾을 수는 없습니다. 달성할 효과 다이어그램은 다음과 같습니다.

[Lenovo]

　iOS 개발에서는 페이지가 A -> B -> C로 이동합니다. C 페이지에 도달한 후 A 및 B 페이지는 항상 데이터 및 상태의 경우 탐색 스택을 통해 배열을 탐색하여 수정 및 할당 등을 위한 이전 페이지를 가져올 수 있습니다. 프록시 및 블록 값 전송과 같은 작업도 있습니다. ​

​ Vue는 단일 페이지 애플리케이션으로 가볍고 데이터를 반복적으로 다운로드하지 않습니다. 한 페이지에서 다른 페이지로 이동할 때 원본 페이지의 Vue 인스턴스와 관련 데이터가 파괴되었습니다. 값의 역전송을 구현하려면 작동 개체와 해당 속성 중 일부를 찾아야 합니다.

【Try】

라우팅 관련 정보를 다음과 같이 3페이지에 인쇄합니다.

원래는 그 객체들 중에 동작 가능한 객체가 있는지 확인하고 싶었지만, 동작하기가 쉽지 않거나 심지어는 너무 번거로워서 iOS에서는 마음에 들지 않았습니다. 그런 다음 저장하려는 데이터를 일부 객체의 프로토타입 또는 __proto__에 적극적으로 추가해 보십시오. 실제 결과는 오류가 보고되고 데이터가 전달되지 않거나 경로가 전환될 때 데이터가 손실되는 것입니다.

지난 이틀 동안 Vue의 공식 웹사이트 안내를 다시 살펴본 결과 글로벌 라우팅에 해당하는 타이밍 방법 외에도 구성 요소 라우팅에 해당하는 몇 가지 후크 기능도 있다는 것을 발견했습니다.

　 세 번째 페이지에서 beforeRouteLeave를 구현하고, 해당 매개변수를 인쇄하여 실제로 앞뒤 경로를 얻을 수 있음을 확인합니다.

【관련 코드】

　/세 페이지의 입력을 selVal 변수에 바인딩한 후 이 페이지의 라우팅 방법에서 두 번째 페이지로 돌아갈지 여부를 판단합니다. , 전달될 매개변수는 query 또는 params에 해당하며, 사용자가 현재 페이지 매개변수 값을 새로 고치면 params의 값이 손실되고, 쿼리는 url 뒤에 연결되어 값이 손실되지 않습니다. 페이지가 새로 고쳐질 때. 다음과 같습니다:

 beforeRouteLeave(to, from, next) {
  if (to.name == 'Two') {
   to.query.temp = this.selVal;
  }
  next();
 }

　 /two 페이지의 마운트된 메소드에서 해당 값을 가져옵니다.

 mounted() {
  if (this.$route.query.temp) {
   this.temp = this.$route.query.temp;
  }
 }

그게 다입니다. 정말 말하고 싶은 것이 있는데, 왜 전에는 keepalive를 사용하거나 구현하기 위해 찾지 못했을까요? 생각해 보세요. 그러면 정말 문제가 많을 것입니다.

　ps: 이 간단한 역전파 값은 이런 식으로 구현되지만, 사용자가 /two 페이지에서 /3 페이지로 들어가기 전에 많은 수의 임시 작업을 수행하는 경우 이 많은 수의 임시 작업을 계속 유지해야 합니다. /3 페이지로 돌아갈 때의 작업은 다음 블로그에 게시될 예정입니다.

관련 권장 사항:

vue 배열 업데이트 방법에 대한 자세한 설명

vue 구성 요소에서 iframe 요소를 사용하는 방법의 예

vue 구성 요소의 세 가지 쓰기 형식에 대한 자세한 설명

위 내용은 Vue에서 페이지 역전송 값의 간단한 구현 방법 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!