uniapp에서 매개변수를 전달하는 방법

모바일 애플리케이션의 인기와 사용자의 요구 사항 변화로 인해 점점 더 많은 개발자가 개발에 uniapp을 사용하기로 선택하고 있습니다. 그러나 발생하는 중요한 문제는 서로 다른 페이지 간에 매개변수를 전달하는 방법입니다. 이번 글에서는 uniapp에서 매개변수를 전달하는 방법을 자세히 소개하겠습니다.

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

URL은 컴퓨터 네트워크에서 파일의 위치를 ​​설명하는 방법입니다. uniapp에서는 URL을 통해 매개변수를 전달할 수 있습니다. 웹 개발에서는 쿼리 문자열을 통해 매개변수를 전달할 수 있습니다. uniapp에서 URL 매개변수를 전달하는 방법에는 두 가지가 있습니다: 경로 점프 및 h5 페이지 점프:

1. 경로 점프

Uniapp은 라우팅 관련 API를 제공하며 그 중 uni.navigateTo 및 uni.redirectTo 이 두 API는 매개변수를 전달할 수 있습니다. 점프할 때. 점프할 때 매개변수는 객체 형태로 URL에 전달되고 쿼리 문자열 형태로 표현될 수 있습니다. 아래와 같이

uni.navigateTo({
  url: '/pages/detail/detail?id=123&name=apple'
})

이동 중인 페이지에서 전달된 매개변수는 this.$route.query 객체를 통해 액세스할 수 있습니다. 아래와 같이

export default {
  mounted() {
    console.log(this.$route.query.id) // 123
    console.log(this.$route.query.name) // 'apple'
  }
}

루트 점프를 통해 전달된 매개변수는 탐색 표시줄의 내역에 저장되므로 반환 작업을 통해 이전 페이지로 돌아가 매개변수를 가지고 다닐 수 있습니다.

2.h5 페이지 점프

uniapp에서는 location.search를 사용하여 URL의 쿼리 문자열과 매개변수를 얻을 수 있습니다. 예:

var url = window.location.search; // ?id=123&name=apple
var obj = {};
if (url.indexOf("?") != -1) {
  url = url.substr(1); // id=123&name=apple
  var arr = url.split("&");
  for(var i = 0; i < arr.length; i++) {
    var tmp = arr[i].split("=");
    obj[tmp[0]] = tmp[1];
  }
}
console.log(obj.id); // 123
console.log(obj.name); // 'apple'

h5 페이지로 점프할 때 다음을 수행해야 한다는 점에 유의해야 합니다. URL을 수동으로 처리합니다.

2. Vuex를 통해 매개변수 전달

uniapp에서는 상태 관리에 Vuex를 사용할 수 있으므로 Vuex를 통해 매개변수를 전달할 수도 있습니다.

1. 페이지에 스토어 만들기

각 페이지에서 먼저 매개변수를 전달할 스토어를 만들어야 합니다. 아래와 같이

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    id: '',
    name: ''
  },
  mutations: {
    SET_ID(state, id) {
      state.id = id
    },
    SET_NAME (state, name) {
      state.name = name
    }
  }
})

export default store

다음과 같이 페이지에 스토어를 소개합니다.

import store from '@/store/index'

2. 페이지에 매개변수 전달

매개변수를 전달해야 하는 페이지에서 변형을 제출하여 매개변수를 스토어에 전달할 수 있습니다. 아래와 같이

export default {
  methods: {
    handleClick() {
      this.$store.commit('SET_ID', '123')
      this.$store.commit('SET_NAME', 'apple')
    }
  }
}

Mutation을 제출한 후 스토어의 해당 상태가 업데이트됩니다.

3. 페이지에서 매개변수 가져오기

매개변수를 가져와야 하는 페이지에서는 $store.state 객체를 통해 스토어에 저장된 매개변수를 가져올 수 있습니다. 아래와 같이

export default {
  mounted() {
    console.log(this.$store.state.id) // 123
    console.log(this.$store.state.name) // 'apple'
  }
}

매개변수 전달을 위해 Vuex를 사용하려면 Vuex 도입이 필요하며 각 페이지에 스토어를 생성해야 한다는 점에 유의해야 합니다.

Summary

uniapp에서는 URL과 Vuex를 통해 매개변수를 전달할 수 있습니다. 간단한 매개변수 전달의 경우 URL을 사용하여 매개변수를 전달하도록 선택할 수 있으며 특정 상황에 따라 경로 점프 또는 h5 페이지 점프를 선택할 수 있습니다. 복잡한 시나리오의 경우 매개변수 전달을 위해 Vuex를 사용할 수 있지만 각 페이지에 스토어를 생성하는 데 주의를 기울여야 합니다. 어떤 방법을 사용하든 실제 요구 사항에 따라 선택해야 합니다.

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