vue3+vite+ts+uniapp的项目中,通过uni.navigateTo跳转时怎么向被打开页面传送数据后者数组,被打开的页面要如何接收
时间: 2024-02-24 21:54:18 浏览: 25
在vue3+vite+ts+uniapp的项目中,通过`uni.navigateTo`跳转页面时可以通过`events`参数向被打开页面传递数据或数组。具体实现步骤如下:
1. 在打开页面的页面中,通过`uni.navigateTo`方法打开被打开的页面,并将需要传递的数据或数组通过`events`参数传递:
```typescript
import { defineComponent } from 'vue'
export default defineComponent({
methods: {
navigateTo() {
uni.navigateTo({
url: '/pages/secondPage/secondPage',
events: {
// 传递数据
passData: {
name: '张三',
age: 18
},
// 传递数组
passArray: [1, 2, 3, 4, 5]
}
})
}
}
})
```
2. 在被打开的页面中,可以在`onLoad`生命周期函数中接收通过`events`参数传递过来的数据或数组:
```typescript
import { defineComponent, onMounted, ref } from 'vue'
export default defineComponent({
setup() {
const name = ref('')
const age = ref(0)
const array = ref<number[]>([])
onMounted(() => {
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1]
// 接收传递过来的数据
const { name: _name, age: _age } = currentPage.options
name.value = _name
age.value = _age
console.log('receive data', { name: name.value, age: age.value })
// 接收传递过来的数组
array.value = currentPage.options.passArray
console.log('receive array', array.value)
})
return {
name,
age,
array
}
}
})
```
这样在被打开的页面中就可以接收到从上一个页面传递过来的数据或数组了。需要注意的是,如果传递的数据较多或数组较大,可以将数据放到一个单独的js文件中,然后在打开页面的页面和被打开的页面中分别导入使用,避免数据过于冗余。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)