uniapp의 매개변수 라우팅 방법에 대한 자세한 설명

Uniapp은 크로스 플랫폼 프론트엔드 개발 프레임워크로, 동시에 여러 플랫폼용 애플리케이션을 개발할 수 있다는 점이 가장 큰 특징입니다. Uniapp에서 라우팅 매개변수 전달은 매우 일반적이고 중요한 기능입니다. 이 글에서는 Uniapp의 매개변수 라우팅 방법을 자세히 소개하고, 모든 사람이 이를 더 잘 이해하고 적용할 수 있도록 구체적인 코드 예제를 제공합니다.

Uniapp의 라우팅 매개변수는 두 가지 상황으로 나눌 수 있습니다. 페이지 A에서 페이지 B로 점프하고 페이지 B로 매개변수를 전달하는 경우, 페이지 B는 매개변수를 수신하여 사용합니다.

1. 페이지 A에서 B로 점프하고 페이지 B로 매개변수 전달

1. 점프 시 매개변수 전달(URL을 통해 매개변수 전달)

uni.navigateTo 또는 uni.redirectTo와 같은 점프 메소드에서는 매개변수를 전달할 수 있습니다. URL을 통해 대상 페이지로 이동합니다. 코드 예시는 다음과 같습니다.

uni.navigateTo({
  url: '/pages/b-page/b-page?id=1&name=uniapp',
  success: (res) => {
    console.log('跳转成功')
  }
})

대상 페이지 B에서 URL 매개변수를 얻어 전달된 매개변수를 얻을 수 있습니다. 코드 예시는 다음과 같습니다.

export default {
  onLoad(options) {
    console.log(options.id)   // 输出：1
    console.log(options.name) // 输出：uniapp
  }
}

2. 점프 시 매개변수 전달(쿼리를 통해 매개변수 전달)

유니앱에서는 URL을 통해 매개변수를 전달하는 것 외에도 매개변수를 전달하는 또 다른 방법, 즉 쿼리를 통해 매개변수를 전달하는 방법도 제공합니다. 코드 예시는 다음과 같습니다.

uni.navigateTo({
  url: '/pages/b-page/b-page',
  query: {
    id: 1,
    name: 'uniapp'
  },
  success: (res) => {
    console.log('跳转成功')
  }
})

대상 페이지 B에서 쿼리 매개변수를 가져오면 전달된 매개변수를 가져올 수 있습니다. 코드 예시는 다음과 같습니다.

export default {
  onLoad(query) {
    console.log(query.id)   // 输出：1
    console.log(query.name) // 输出：uniapp
  }
}

2. 페이지 B는 매개변수를 수신하고

매개변수가 URL을 통해 전달되거나 쿼리를 통해 전달되면 대상 페이지 B에서 전달된 매개변수를 얻을 수 있습니다. 대상 페이지 B에서는 onLoad 수명주기 함수 또는 매개변수를 사용해야 하는 기타 위치에서 처리할 수 있습니다. 코드 예시는 다음과 같습니다.

export default {
  onLoad(query) {
    console.log(query.id)   // 输出：1
    console.log(query.name) // 输出：uniapp
    // 接收到参数后，可以进行相应的逻辑处理
  }
}

라이프 사이클 함수에서 매개변수를 받는 것 외에도 데이터 속성에 변수를 정의하여 매개변수를 받아 사용할 수도 있습니다. 코드 예시는 다음과 같습니다.

export default {
  data() {
    return {
      id: null,
      name: ''
    }
  },
  onLoad(query) {
    this.id = query.id
    this.name = query.name
    // 接收到参数后，可以进行相应的逻辑处理
  }
}

위 방법을 이용하면 유니앱에서 페이지 간 매개변수 전송을 쉽게 구현할 수 있습니다. URL을 통해 매개변수를 전달하든 쿼리를 통해 매개변수를 전달하든 Uniapp은 이를 구현하는 간단하고 유연한 방법을 제공하며 실제 개발에서 널리 사용됩니다. 이 기사의 지침과 샘플 코드가 독자가 Uniapp의 라우팅 매개변수 전달 기능을 더 잘 이해하고 사용하는 데 도움이 되기를 바랍니다.

위 내용은 uniapp의 매개변수 라우팅 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!