uniapp怎麼跳轉取得參數

一、uniapp簡介

uniapp是一個開發跨平台應用的工具，它使用vue.js開發框架、WebStorm IDE和HBuilderX整合開發環境，可支援開發微信小程式、支付寶小程式、百度小程式、頭條小程式、H5、App等應用程式。

二、uniapp跳轉頁

在uniapp中，透過路由的方式進行頁面跳躍。路由的基本組成部分包含路徑和參數。其中，路徑用於指定跳轉的頁面路徑，參數則是一些額外的信息，如id、name等等。

在uniapp中，我們透過uni.navigateTo()函數來完成頁面跳躍操作。具體的實現步驟如下：

1.定義一個按鈕或鏈接，當點擊該按鈕或鏈接時，將執行跳轉操作；

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

2.在toDetail方法中，呼叫uni .navigateTo()函數，將需要跳躍的頁面路徑作為參數傳入；

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>

三、uniapp取得頁面參數的方式

uniapp中取得頁面參數主要有兩種方式：query和params。在前面的範例中，我們使用了query的方式來傳遞和取得參數。

1. query參數

query參數是url中的參數，透過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參數是透過路由物件傳遞的參數，在跳轉頁面的時候透過uni.navigateTo()函數的第二個參數傳遞。在目標頁面中，可以透過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中文網其他相關文章！