uniapp實作如何在頁間傳遞數據，需要具體程式碼範例
#在uniapp開發中，頁間傳遞資料是一個非常常見的需求。透過合理的資料傳遞，我們可以實現頁面跳轉時的資料共享和互動。本文將介紹如何在uniapp中實現頁間的資料傳遞，並給出具體的程式碼範例。
URL參數傳遞資料是最常見、也是最簡單的一種方式。透過在跳轉連結的URL中加入參數，實現頁間資料的傳遞。以下是範例程式碼：
// 頁面A
<text>{{param}}</text>
<button @click="navigateToPageB">跳转至页面B</button>
#
<script><br>export default {<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { param: 'Hello Uniapp' }</pre><div class="contentsignin">登入後複製</div></div><p>},<br> methods: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>navigateToPageB() { uni.navigateTo({ url: '/pages/pageB?pageParam=' + this.param }) }</pre><div class="contentsignin">登入後複製</div></div><p>#}<br>}<br></script>
// 頁面B
<text>{{pageParam}}</text>
<script><br>export default {<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { pageParam: '' }</pre><div class="contentsignin">登入後複製</div></div><p>},<br> onLoad(options) {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>this.pageParam = options.pageParam</pre><div class="contentsignin">登入後複製</div></div><p>}<br>}<br></script>
在頁面A中，我們透過按鈕點擊事件跳到頁面B，並攜帶參數pageParam。在頁面B中，透過onLoad生命週期函數取得傳遞過來的參數並賦值給pageParam，然後在頁面上展示。
如果需要在多個頁間共享數據，使用Vuex是個不錯的選擇。 Vuex是一個專為Vue.js應用程式開發的狀態管理模式，也可以在uniapp中使用。下面是一個範例程式碼：
// store/index.js
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
data: 'Hello Uniapp'
},
mutations: {
updateData(state, payload) {
state.data = payload
}},
actions: {} ,
getters: {}
})
// 頁面A
<text>{{data}}</text>
<button @click="navigateToPageB">跳转至页面B</button><script><br>import { mapState } from 'vuex'</p><p>export default {<br> computed: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>...mapState(['data'])</pre><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div><p>} ,<br> methods: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>navigateToPageB() { this.$store.commit('updateData', 'Hello Page B') uni.navigateTo({ url: '/pages/pageB' }) }</pre><div class="contentsignin">登入後複製</div></div><p>}<br>}<br></script>
// 頁面B
<text>{{data}}</text>
