uniapp 页面传递多个参数
时间: 2024-10-10 12:12:38 浏览: 84
在uniApp中,页面之间的参数传递通常通过`navigator`对象或者`$route`来实现,特别是在路由跳转时。如果你想传递多个参数,可以使用以下几种方式:
**1. Query String(URL查询参数):**
当你使用`navigator.navigateTo`或`navigator.reLaunch`等导航方法时,可以在URL后面添加多个键值对,如:
```javascript
this.$router.push({
path: '/targetPage',
query: {
param1: 'value1',
param2: 'value2'
}
})
```
然后在目标页面接收参数:
```javascript
// targetPage.vue
data() {
return {
params: this.$route.query
}
}
```
**2. Route Parameters(路由参数):**
对于非查询字符串形式的参数,你可以使用`params`选项:
```javascript
this.$router.push({
path: '/targetPage/:param1/:param2',
params: {
param1: 'value1',
param2: 'value2'
}
})
```
在目标页面获取参数:
```javascript
// targetPage.vue
computed: {
getParams() {
return this.$route.params;
}
}
```
**3. Vuex状态管理:**
若参数较多且需长期保持,也可以选择存储在Vuex的状态中,先通过`actions`更新store,再在其他组件通过`mapGetters`获取。
记得在每个页面的生命周期钩子(如created、mounted)里检查并初始化参数。
阅读全文