[uniapp的页面传参]详细讲解uniapp中页面传参的传递方式和接受方式 使用案例 代码注释

目录

• • 一、传递方式
  • • [1. URL传参](#1. URL传参)
    • [2. Storage传参](#2. Storage传参)
    • [3. Vuex传参](#3. Vuex传参)
    • 4.api传参eventChannel
  • 二、接受方式
  • • [1. URL传参](#1. URL传参)
    • [2. Storage传参](#2. Storage传参)
    • [3. Vuex传参](#3. Vuex传参)
    • 4.api传参eventChannel
  • 三、使用案例
  • 四.提醒

在uniapp中，页面传参是非常常见的需求。本文将详细讲解uniapp中页面传参的传递方式和接受方式，以及使用案例，同时附上代码注释。

一、传递方式

1. URL传参

URL传参是一种比较简单的传递方式，它是通过URL地址来传递参数的。我们可以在URL地址后面加上参数，例如：

<uni-button @click="goToDetail">跳转到详情页</uni-button>//编程式传参  比较常用
<navigator url="/pages/detail/detail?id=123">跳转到详情页</navigator>//标签传参
// 跳转到详情页，并传递id参数
goToDetail() {
  uni.navigateTo({
    url: '/pages/detail/detail?id=123'
  })
}

在接收页面中，我们可以通过this.$route.query来获取传递的参数：

export default {
  onLoad() {
    console.log(this.$route.query.id) // 输出：123
  }
}

对于微信小程序 this.$ route.query.id 可能不能使用 因为微信小程序不识别 this.$ route

而替代方案

不使用this.$ route 使用 onload传参

onLoad(getData) {//getData就是参数对象  兼用微信小程序
	console.log(getData.id);		
}

2. Storage传参

Storage传参是通过uni-app提供的Storage API来传递参数的。我们可以在跳转之前将参数存储到Storage中，然后在接收页面中获取：

<uni-button @click="goToDetail">跳转到详情页</uni-button>

// 跳转到详情页，并将id参数存储到Storage中
goToDetail() {
  uni.setStorageSync('id', 123)
  uni.navigateTo({
    url: '/pages/detail/detail'
  })
}

在接收页面中，我们可以通过uni.getStorageSync来获取存储的参数：

export default {
  onLoad() {
    console.log(uni.getStorageSync('id')) // 输出：123
  }
}

3. Vuex传参

Vuex传参是通过uni-app提供的Vuex API来传递参数的。我们可以在跳转之前将参数存储到Vuex中，然后在接收页面中获取：

<uni-button @click="goToDetail">跳转到详情页</uni-button>

// 跳转到详情页，并将id参数存储到Vuex中
goToDetail() {
  uni.$emit('setId', 123)
  uni.navigateTo({
    url: '/pages/detail/detail'
  })
}

在Vuex中，我们可以定义一个state来存储参数：

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

在接收页面中，我们可以通过mapState来获取存储的参数：

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['id'])
  },
  onLoad() {
    console.log(this.id) // 输出：123
  }
}

4.api传参eventChannel

api传参是通过uni-app提供的API来传递参数的。我们可以在跳转之前将参数存储到options中，例如：

<uni-button @click="goToDetail">跳转到详情页</uni-button>

// 跳转到详情页，并传递id参数
goToDetail() {
  uni.navigateTo({
    url: '/pages/detail/detail',
    success: (res) => {
      res.eventChannel.emit('acceptDataFromOpenerPage', { id: 123 })
    }
  })
}

在这个例子中，我们使用了eventChannel来传递参数。我们在跳转之前，通过success回调函数来获取eventChannel，然后通过emit方法来传递参数。

在api传参的方式中，我们可以通过uni.on来监听传递的参数：

export default {
  onLoad() {
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.on('acceptDataFromOpenerPage', (data) => {
      console.log(data.id) // 输出：123
    })
  }
}

在这个例子中，我们通过getOpenerEventChannel方法来获取eventChannel，然后通过on方法来监听传递的参数。

二、接受方式

1. URL传参

在URL传参的方式中，我们可以通过this.$route.query来获取传递的参数：

export default {
  onLoad() {
    console.log(this.$route.query.id) // 输出：123
  }
}

2. Storage传参

在Storage传参的方式中，我们可以通过uni.getStorageSync来获取存储的参数：

export default {
  onLoad() {
    console.log(uni.getStorageSync('id')) // 输出：123
  }
}

3. Vuex传参

在Vuex传参的方式中，我们可以通过mapState来获取存储的参数：

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['id'])
  },
  onLoad() {
    console.log(this.id) // 输出：123
  }
}

4.api传参eventChannel

在api传参的方式中，我们可以通过uni.on来监听传递的参数：

export default {
  onLoad() {
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.on('acceptDataFromOpenerPage', (data) => {
      console.log(data.id) // 输出：123
    })
  }
}

在这个例子中，我们通过getOpenerEventChannel方法来获取eventChannel，然后通过on方法来监听传递的参数。

三、使用案例

下面是一个完整的使用案例，包括传递和接收参数的方式：

// pages/index/index.vue
<template>
  <view>
    <uni-button @click="goToDetail">跳转到详情页</uni-button>
  </view>
</template>

<script>
export default {
  methods: {
    goToDetail() {
      // URL传参
      // uni.navigateTo({
      //   url: '/pages/detail/detail?id=123'
      // })

      // Storage传参
      // uni.setStorageSync('id', 123)
      // uni.navigateTo({
      //   url: '/pages/detail/detail'
      // })

      // Vuex传参
      uni.$emit('setId', 123)
      uni.navigateTo({
        url: '/pages/detail/detail'
      })
    }
  }
}
</script>

// pages/detail/detail.vue
<template>
  <view>
    <text>{{ id }}</text>
  </view>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['id'])
  },
  onLoad() {
    // URL传参
    // console.log(this.$route.query.id)

    // Storage传参
    // console.log(uni.getStorageSync('id'))

    // Vuex传参
    // console.log(this.id)
  }
}
</script>

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

uni.$on('setId', id => {
  store.commit('setId', id)
})

export default store

以上就是uniapp中页面传参的传递方式和接受方式的详细讲解，以及使用案例和代码注释。希望对大家有所帮助！

四.提醒

以上的页面传参方式中

1. URL传参
2. Storage传参
   比较常用 可以满足大家的开发需求

另外的传参方式 看场景和需求在做处理

希望对你有所帮助