uniapp 라우팅에서 매개변수를 사용하여 점프를 구현하는 방법

UniApp은 한 번 코드를 작성하고 동시에 여러 플랫폼에 게시하는 것을 지원하는 크로스 플랫폼 개발 프레임워크입니다. UniApp에서는 여러 페이지 사이를 이동하기 위해 라우팅 점프 기능을 사용해야 하는 경우가 많습니다. 그중에서도 매개변수를 이용한 점프는 비교적 흔한 상황이다. 이 기사에서는 매개변수 점프를 사용한 UniApp 라우팅을 소개합니다.

1. 경로 점프

UniApp에서는 uni.navigateTo() 함수를 통해 경로 점프를 구현합니다. 이 기능은 홈 페이지에서 세부 정보 페이지로 이동하는 등 한 페이지에서 다른 페이지로 이동하는 데 사용할 수 있습니다. 다음은 기본 점프 예시입니다.

// index.vue
uni.navigateTo({
  url: '/pages/detail/detail'
})

위 예시에서 점프 경로는 url 매개변수를 통해 지정됩니다. 이 경로는 "/"로 시작하는 상대 경로로, 페이지 디렉터리의 세부 정보 페이지로 이동한다는 의미입니다.

2. 매개변수를 사용하여 점프

페이지 간에 일부 데이터를 전송해야 할 경우 매개변수를 사용하여 점프를 사용해야 합니다. 예를 들어 목록 페이지에서 세부정보 페이지로 이동할 때 현재 선택한 항목의 ID를 전달해야 합니다. UniApp에서는 uni.navigateTo() 함수를 사용할 때 쿼리 매개변수를 통해 매개변수를 전달할 수 있습니다. 다음은 매개변수를 사용하여 점프하는 예입니다.

// list.vue
uni.navigateTo({
  url: '/pages/detail/detail?id=' + item.id
})

위 예에서는 url 매개변수에 쿼리 문자열을 추가하여 매개변수가 전달됩니다. 쿼리 문자열은 "?"로 시작하고 그 뒤에 매개변수 이름과 매개변수 값이 오고, "&"를 사용하여 여러 매개변수를 구분합니다. 예를 들어 "id=1&name=Zhang San"은 ID와 이름이라는 두 개의 매개변수가 전달되고 해당 값이 각각 1과 Zhang San임을 의미합니다.

매개변수를 받을 때 this.$route.query 속성을 통해 전달된 매개변수를 가져올 수 있습니다. 예:

// detail.vue
console.log(this.$route.query.id) // 输出传递过来的ID参数的值

위 예에서는 this.$route.query.id를 통해 ID 매개변수의 값을 얻어 콘솔에 출력합니다.

3. 요약

Jump with 매개 변수는 UniApp에서 널리 사용되며 다양한 매개 변수와 데이터를 전달하는 데 사용할 수 있습니다. uni.navigateTo() 및 쿼리 매개변수를 사용하면 매개변수로 페이지 점프를 쉽게 구현할 수 있습니다. UniApp 애플리케이션을 개발할 때 페이지로 이동해야 하는 경우 위의 예를 참조하고 해당 방법을 사용하여 이를 달성할 수 있습니다.

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