uniapp에서 페이지 매개변수를 설정하는 방법

모바일 애플리케이션 개발이 급속히 발전함에 따라 점점 더 많은 개발자가 uniapp을 사용하여 크로스 플랫폼 애플리케이션을 빠르게 구축하고 있습니다. 그러나 페이지를 생성할 때 매개변수를 페이지에 전달해야 하는 경우가 있으며 이러한 매개변수는 다른 페이지에서 전달될 수 있습니다. 그렇다면 uniapp은 페이지 매개변수를 어떻게 설정하나요? 이번 글에서는 uniapp에서 페이지 매개변수를 설정하는 방법을 자세히 소개하겠습니다.

1. URL을 통해 매개변수 전달

매우 일반적인 방법인 URL을 통해 매개변수를 전달할 수 있습니다. uniapp에서는 이를 달성하기 위해 라우팅 점프를 사용할 수 있습니다. 먼저 원본 페이지에서 전달해야 하는 매개변수를 설정할 수 있습니다.

uni.navigateTo({
  url: '/pages/target/target?id=1&name=uniapp'
})

대상 페이지로 이동할 때 URL의 쿼리 매개변수를 통해 데이터를 전달할 수 있습니다. 대상 페이지에서는 다음과 같은 방법으로 매개변수를 가져올 수 있습니다.

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

여기에서는 onLoad 수명 주기 후크 기능을 사용하여 매개변수를 가져옵니다. onLoad 함수는 페이지가 로드될 때 트리거되는 후크 함수이며 URL에 포함된 매개변수를 얻을 수 있습니다.

2. 글로벌 데이터를 통해 매개변수 전달

글로벌 데이터를 통해 매개변수를 전달할 수도 있습니다. uniapp에서는 vuex를 사용하여 글로벌 데이터를 관리할 수 있습니다. vuex에서 전역 변수를 정의하여 전달해야 하는 매개변수를 저장한 다음 대상 페이지에서 해당 매개변수를 얻을 수 있습니다.

먼저 vuex 상태에서 전달해야 하는 매개변수를 정의합니다.

const state = {
  userInfo: {
    id: 1,
    name: 'uniapp',
    age: 18
  }
}

그런 다음 원본 페이지에서 다음과 같은 방법으로 매개변수를 설정할 수 있습니다.

store.commit('setUserInfo', state.userInfo)

여기에서는 vuex의 커밋 기능을 사용하여 업데이트합니다. 글로벌 데이터. setUserInfo는 userInfo의 값을 업데이트하는 데 사용되는 돌연변이 함수입니다.

대상 페이지에서 다음과 같은 방법으로 매개변수를 가져올 수 있습니다.

export default {
  computed: {
    userInfo() {
      return this.$store.state.userInfo
    }
  }
}

여기에서는 계산된 속성을 사용하여 userInfo 값을 가져옵니다. $store는 vuex에서 제공하는 전역 상태 관리 개체이며 모든 구성 요소에서 직접 사용할 수 있습니다.

요약

uniapp에서는 URL과 전역 데이터를 통해 매개변수를 전달할 수 있습니다. 두 방법 모두 장점과 단점이 있습니다. URL을 통해 매개변수를 전달하면 애플리케이션이 더 유연해질 수 있지만 매개변수 유형의 수가 제한되어 있습니다. 전역 데이터를 통해 매개변수를 전달하면 코드 결합이 줄어들지만 더 많은 메모리 공간을 차지하게 됩니다. 이를 사용할 때 특정 애플리케이션 시나리오에 따라 매개변수를 전달하는 적절한 방법을 선택해야 합니다.

위 내용은 유니앱에서 페이지 매개변수를 설정하는 방법에 대한 소개입니다. 모든 분들께 도움이 되길 바랍니다.

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