uniapp에서 매개변수를 가져오기 위해 점프하는 방법

1. uniapp 소개

uniapp은 vue.js 개발 프레임워크, WebStorm IDE 및 HBuilderX 통합 개발 환경을 사용하여 WeChat 애플릿, Alipay 애플릿, Baidu 애플릿 및 Toutiao 애플릿. 프로그램, H5, 앱 및 기타 애플리케이션.

2. 유니앱 점프 페이지

유니앱에서는 라우팅을 통해 페이지 점프가 이루어집니다. 라우팅의 기본 구성 요소에는 경로와 매개변수가 포함됩니다. 그 중 경로는 이동할 페이지 경로를 지정하는 데 사용되며 매개변수는 ID, 이름 등과 같은 몇 가지 추가 정보입니다.

uniapp에서는 uni.navigateTo() 함수를 사용하여 페이지 점프 작업을 완료합니다. 구체적인 구현 단계는 다음과 같습니다.

1. 버튼이나 링크를 클릭하면 점프 작업이 수행됩니다.

<button @click="toDetail">跳转到详情页</button>

2. 점프할 페이지 경로가 매개변수로 전달됩니다.

toDetail() {
   uni.navigateTo({
        url:'./detail?id=1'
   })
}

3. 점프할 페이지에서 this.$route.query.id를 통해 전달된 매개변수를 가져옵니다.

<template>
   <div>
      <p>获取到的参数为：{{id}}</p>
   </div>
</template>
<script>
   export default {
      data() {
         return {
            id: ''
         }
      },
      onLoad() {
         this.id = this.$route.query.id;
      }
   }
</script>

3. uniapp이 페이지 매개변수를 가져오는 방법

uniapp에서 페이지 매개변수를 가져오는 두 가지 주요 방법은 쿼리와 매개변수입니다. 이전 예에서는 쿼리를 사용하여 매개변수를 전달하고 가져왔습니다.

1. query 매개변수

query 매개변수는 uni.navigateTo() 함수를 통해 점프를 완료한 후 다음과 같이 대상 페이지의 URL 끝에 연결됩니다. : ./detail?id=1. 대상 페이지에서는 this.$route.query를 통해 전달된 매개변수를 얻을 수 있습니다.

<template>
   <div>
      <p>获取到的参数为：{{id}}</p>
   </div>
</template>
<script>
   export default {
      data() {
         return {
            id: ''
         }
      },
      onLoad() {
         this.id = this.$route.query.id;
      }
   }
</script>

2. params 매개변수

params 매개변수는 페이지로 이동할 때 라우팅 개체를 통해 전달되는 매개변수입니다. 대상 페이지에서는 this.$route.params를 통해 전달된 매개변수를 얻을 수 있습니다.

toDetail() {
   uni.navigateTo({
        url:'./detail',
        params: {
            id: 1
        }
   })
}

<template>
   <div>
      <p>获取到的参数为：{{id}}</p>
   </div>
</template>
<script>
   export default {
      data() {
         return {
            id: ''
         }
      },
      onLoad() {
         this.id = this.$route.params.id;
      }
   }
</script>

요약

이 글의 소개를 통해 uniapp이 페이지 점프를 수행하는 기본적인 방식과 페이지 매개변수를 얻는 방법을 이해했습니다. 실제 프로젝트에서는 특정 비즈니스 요구에 따라 매개변수를 전송하고 획득하는 적절한 방법을 선택해야 합니다. 이러한 기본 지식을 학습하고 숙달함으로써 uniapp을 더 잘 개발하고, 개발 효율성을 향상시키며, 사용자에게 더 나은 애플리케이션 경험을 제공할 수 있습니다.

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