uniapp如何傳遞參數

隨著行動應用的普及和用戶需求的不斷變化，越來越多的開發者選擇使用uniapp進行開發。然而，隨之帶來的一個重要問題是如何在不同頁面之間傳遞參數。在本文中，將會為大家詳細介紹uniapp中如何傳遞參數。

一、透過URL傳遞參數

URL是一種描述檔案在電腦網路中位置的方式。在uniapp中，可以透過URL傳遞參數。在web開發中，可以透過query string來傳遞參數。在uniapp中有兩種方式來進行URL傳參：路由跳轉和h5頁跳轉：

1.路由跳轉

uniapp中提供了一些路由相關的API，其中，uni.navigateTo和uni.redirectTo這兩個API可以在跳轉時攜帶參數。在跳轉時，可以將參數以物件的形式傳遞給URL，並以query string（查詢字串）的形式來表示。如下所示：

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進行處理。

二、透過Vuex傳遞參數

在uniapp中，可以使用Vuex進行狀態管理，因此，我們也可以透過Vuex來進行參數傳遞。

1. 在頁面中建立store

在每個頁面中，我們需要先建立一個store來進行參數傳遞。如下所示：

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

在頁面中引入store，如下所示：

import store from '@/store/index'

2. 在頁面中傳遞參數

##在需要傳遞參數的頁面中，可以透過提交mutation來將參數傳遞到store。如下圖：

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

在提交mutation後，store中的對應state就被更新了。

在頁面中取得參數

在需要取得參數的頁面中，可以透過$store.state物件來取得store中儲存的參數。如下所示：

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

需要注意的是，使用Vuex進行參數傳遞需要引入Vuex，並且需要在每個頁面中都建立store。

總結

在uniapp中，我們可以透過URL和Vuex兩種方式來進行參數傳遞。對於簡單的參數傳遞，我們可以選擇使用URL傳參，並且可以根據具體情況選擇路由跳轉或h5頁面跳轉。對於複雜的場景，我們可以選擇使用Vuex來進行參數傳遞，但需要注意在每個頁面中建立store。無論使用哪種方式，都需要根據實際需求進行選擇。

以上是uniapp如何傳遞參數的詳細內容。更多資訊請關注PHP中文網其他相關文章！