uniapp路由传参对象
时间: 2023-08-11 20:04:51 浏览: 249
vue路由传参 vue路由传参
5星 · 资源好评率100%
在 Uniapp 中,可以使用路由传参来传递对象。有两种常用的方式来实现这个目的:
1. 使用 query 参数传递对象:
在跳转到目标页面时,可以通过在路由路径后面添加 query 参数的方式来传递对象。例如:
```javascript
// 跳转时传递对象参数
uni.navigateTo({
url: '/pages/targetPage?obj=' + JSON.stringify(obj)
});
```
在目标页面的 `onLoad` 生命周期中,可以通过 `this.$route.query` 获取传递过来的对象参数:
```javascript
onLoad() {
const obj = JSON.parse(this.$route.query.obj);
// 使用传递过来的对象参数
}
```
2. 使用 vuex 来共享对象数据:
在 vuex 的 store 中创建一个对象类型的 state,然后在源页面中通过提交 mutation 的方式将对象数据存储到 state 中,接着在目标页面中通过计算属性或者直接访问 state 来获取对象数据。例如:
```javascript
// 在 store 中创建一个对象类型的 state
const store = new Vuex.Store({
state: {
obj: {}
},
mutations: {
setObj(state, obj) {
state.obj = obj;
}
}
});
// 在源页面中提交 mutation 来存储对象数据
store.commit('setObj', obj);
// 在目标页面中获取对象数据
computed: {
obj() {
return this.$store.state.obj;
}
}
```
这样就可以在目标页面中使用 `obj` 来获取传递过来的对象数据了。
以上是两种常用的传递对象参数的方式,你可以根据具体的需求选择其中一种来使用。
阅读全文