uniapp中路由傳參的方法詳解

Uniapp是一款跨平台的前端開發框架，其最大的特色就是能夠同時開發多個平台的應用。在Uniapp中，路由的傳參是一個非常常見且重要的功能。本文將詳細介紹Uniapp中路由傳參的方法，並提供具體的程式碼範例，幫助大家更能理解和應用。

Uniapp中路由傳參可以分為兩種情況：從頁面A跳到頁面B，傳遞參數給頁面B；頁面B接收參數並使用。

一、從頁面A跳到頁面B，傳遞參數給頁面B

1. 在跳轉時傳遞參數（透過URL傳遞參數）

#在uni.navigateTo或uni.redirectTo等跳轉方法中，可以透過URL的方式將參數傳遞給目標頁。程式碼範例如下：

uni.navigateTo({
  url: '/pages/b-page/b-page?id=1&name=uniapp',
  success: (res) => {
    console.log('跳转成功')
  }
})

在目標頁面B中，可以透過取得URL參數的方式取得到傳遞的參數。程式碼範例如下：

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

2. 在跳轉時傳遞參數（透過query傳遞參數）

除了透過URL傳遞參數，Uniapp還提供了另一種方式傳遞參數，即透過query傳遞參數。程式碼範例如下：

uni.navigateTo({
  url: '/pages/b-page/b-page',
  query: {
    id: 1,
    name: 'uniapp'
  },
  success: (res) => {
    console.log('跳转成功')
  }
})

目標頁面B中，可以透過取得query參數的方式來取得傳遞的參數。程式碼範例如下：

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

二、頁面B接收參數並使用

無論是透過URL傳遞參數或透過query傳遞參數，都可以在目標頁面B中取得到傳遞的參數。在目標頁面B中，可以在onLoad生命週期函數或其他需要使用參數的地方處理。程式碼範例如下：

export default {
  onLoad(query) {
    console.log(query.id)   // 输出：1
    console.log(query.name) // 输出：uniapp
    // 接收到参数后，可以进行相应的逻辑处理
  }
}

除了在生命週期函數中接收參數，在data屬性中也可以定義一個變數來接收參數並使用。程式碼範例如下：

export default {
  data() {
    return {
      id: null,
      name: ''
    }
  },
  onLoad(query) {
    this.id = query.id
    this.name = query.name
    // 接收到参数后，可以进行相应的逻辑处理
  }
}

透過上述方法，我們可以輕鬆地在Uniapp中實作頁面之間的參數傳遞。無論是透過URL傳遞參數或透過query傳遞參數，Uniapp都提供了簡潔靈活的方式來實現，在實際開發中廣泛應用。希望本文的說明和範例程式碼可以幫助讀者更好地理解和使用Uniapp中的路由傳參功能。

以上是uniapp中路由傳參的方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！