한 페이지를 공유하는 여러 Vue 경로 문제 해결

아래에서는 한 페이지를 공유하는 여러 Vue 경로의 문제를 해결하는 기사를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

일상 Vue 개발에서는 페이지를 공유하기 위해 여러 경로가 필요할 수 있습니다. 특히 경로가 동적으로 추가되면 다른 경로는 다른 데이터만 표시하고 다른 변경 사항은 없습니다. 예:

let routes = [
  {path:"/zhanshan",
  components:Person,
  },
  {path:"/lisi",
  components:Person,
  },
  {path:"/wangwu",
  components:Person,
  }
]

이 경우 페이지가 처음으로 성공적으로 로드된 후 다시 로드되지 않는 것을 발견했습니다. 따라서 페이지에는 항상 처음 로드된 데이터가 표시되므로 라우팅이 적용되지 않은 것처럼 보입니다. 그러나 브라우저 주소 표시줄의 변경 사항을 관찰하면 이것이 라우팅과 관련이 없음을 확인할 수 있습니다. . 이는 Vue를 막 사용하기 시작한 학생들에게 매우 유용합니다. 사실 이는 페이지의 선언 주기와 관련이 있습니다. 계산됨...)은 페이지가 로드된 후 다시 시작되지 않으므로 결과적으로 페이지가 점프하지 않는 것처럼 느껴집니다.

이런 종류의 비즈니스 요구 사항은 실제로 페이지를 전환할 필요가 없습니다. 변경하려면 페이지의 라우팅 주소 변경만 모니터링하면 됩니다. 주소가 변경되었습니다. 데이터를 다시 로드해 보겠습니다.

watch:{
 "$route":function(to,from){
   //from 对象中包含当前地址
   //to 对象中包含目标地址
   //其实还有一个next参数的，这个参数是控制路由是否跳转的，如果没写，可以不用写next()来代表允许路由跳转，如果写了就必须写next(),否则路由是不会生效的。
 }
}

경로가 변경될 때마다 위 함수가 실행됩니다. 이 함수에서 페이지 데이터를 다시 로드할 수 있습니다. 페이지 구조가 크게 변경된 경우 별도의 새 페이지를 만드는 것이 좋습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

JS에서 컨텍스트 매개변수 값을 얻기 위해 EL 표현식을 사용하는 방법

JS에서 왼쪽 목록을 오른쪽 목록으로 이동하는 기능을 구현하는 방법

EL 표현식 사용 Node.js와 비어 있지 않은 판단 방법

위 내용은 한 페이지를 공유하는 여러 Vue 경로 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!