Vue에서 전달되는 경로 매개변수를 사용하는 방법

이 기사에서는 Vue에서 라우팅 매개변수 전송 시 발생할 수 있는 함정에 대한 관련 정보를 주로 소개합니다. 기사에서는 샘플 코드를 통해 자세히 소개합니다. 학습이나 작업이 필요한 모든 사람이 따라할 수 있는 학습 가치가 있습니다. 편집자와 함께.

머리말

vue에는 다양한 유형의 경로 점프 매개변수가 있습니다. 제가 일반적으로 사용하는 매개변수는 다음과 같습니다.

• Jump through router-link

• 프로그래밍 탐색을 통한 경로 점프

이 글에서는 주로 vue 라우팅 매개변수를 전달할 때 발생할 수 있는 몇 가지 함정을 소개하고 참고 및 학습을 위해 공유합니다. 아래에서는 자세히 설명하지 않겠습니다. 자세한 소개를 살펴보겠습니다.

먼저 내 경로의 정의

{
 path: '/b',
 name: 'B',
 component: resolve => require(['../pages/B.vue'], resolve)
}

컴포넌트 A에서 컴포넌트 B로 점프하고 라우팅 정보 객체를 통해 일부 매개변수를 전달합니다.

this.$router.push({
 path: '/b',
 params: {
  paramA: 'a' 
 },
 query:{
  paramB: 'b'
 }
})

컴포넌트 B에서 매개변수를 가져옵니다

this.$route.query.paramB  //b
this.$route.params.paramA //undefined

파라미터를 통해 전달합니다. 경로의 객체 paramB 매개변수는 항상 정의되지 않으며 이유를 찾을 수 없습니다. 정보를 살펴본 후 마침내 그 이유를 찾았습니다. 왜냐하면 경로의 params 개체는 경로를 통해서가 아니라 경로 이름을 통해 호출되어야 하며 쿼리 개체에는 이러한 요구 사항이 없기 때문입니다.

그래서 코드를 수정합니다:

this.$router.push({
 name: 'B',
 params: {
  paramA: 'a' 
 },
 query:{
  paramB: 'b'
 }
})

경로 매개변수를 해당 경로 이름으로 바꾸면 됩니다. 이때 매개변수를 가져올 때 모든 것이 정상입니다.

this.$route.query.paramB  //b
this.$route.params.paramA //a

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

WeChat 미니 프로그램에서 오디오 구성 요소를 사용하는 방법

WeChat 미니 프로그램에서 비디오 구성 요소를 사용하여 비디오를 재생하는 방법

에서 다운로드 진행률 표시줄을 구현하는 방법 WeChat 미니 프로그램

javaScript에서 휴대폰 번호 확인 도구인 PhoneUtils를 사용하는 방법

위 내용은 Vue에서 전달되는 경로 매개변수를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!