uniapp vue2 路由、全局、Vuex传参
uniapp vue2 路由、全局、Vuex传参
在uni-app中,使用navigateTo
跳转时,可以通过URL参数的形式传递简单的数据,但是不建议通过URL直接传递对象。这是因为URL参数有长度限制,并且需要对对象进行序列化和反序列化。相反,您可以通过全局变量、Vuex或自定义事件来传递对象。
这里简单的示例,展示了如何在uni-app中使用全局变量传递对象:
一、路由传参
将对象序列化为JSON字符串,然后在接收页面上解析它。但请注意,这种方法可能会受到URL长度限制的影响,并且在解析时可能出现错误。
以下是使用路由传递对象的示例:
发送页面
在发送页面,使用JSON.stringify()
将对象序列化为JSON字符串,并作为URL参数传递:
methods: {
goToDetails() {
const exampleObject = {
name: "John",
age: 30,
city: "New York",
};
uni.navigateTo({
url: '/pages/details/index?data=' + JSON.stringify(exampleObject),
});
},
},
接收页面
在接收页面的onLoad
生命周期钩子中,使用JSON.parse()
将JSON字符串解析为对象:
export default {
data() {
return {
exampleObject: null,
};
},
onLoad(options) {
if (options.exampleObject ) {
this.exampleObject = JSON.parse(decodeURIComponent(options.exampleObject));
}
},
};
这个方法在简单的情况下可以工作,但请注意,如果您尝试传递大型对象或包含特殊字符的对象,可能会遇到问题。此外,如果对象中包含循环引用,JSON.stringify()
将会抛出错误。
虽然可以通过路由传递序列化后的对象,但这种方法可能不是最佳实践。请谨慎使用,并确保在应用程序中进行充分测试。
二、跳转页面前,将对象存储到全局变量
在src/main.js
文件中,初始化一个空对象用作全局变量:
Vue.prototype.$globalData = {};
在发送页面,将对象存储到全局变量,并执行navigateTo
:
methods: {
goToDetails() {
const exampleObject = {
name: "John",
age: 30,
city: "New York",
};
this.$globalData.exampleObject = exampleObject;
uni.navigateTo({
url: "/pages/details/index",
});
},
},
在接收页面中获取对象
在接收页面,可以通过onLoad
或onShow
生命周期钩子获取全局变量中的对象:
export default {
data() {
return {
exampleObject: null,
};
},
onLoad() {
if (this.$globalData.exampleObject) {
this.exampleObject = this.$globalData.exampleObject;
}
},
};
这样,在跳转页面时,您可以将对象存储到全局变量中,并在接收页面中轻松获取它。但请注意,全局变量可能会导致数据混乱,特别是在复杂应用程序中。因此,对于更大的项目,建议使用Vuex来管理状态。
三、使用Vuex传递对象的示例:
- 首先,在
store
文件夹中创建一个名为index.js
的文件(如果尚未创建)。 - 在
index.js
文件中,初始化Vuex存储:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
exampleObject: {},
},
mutations: {
setExampleObject(state, payload) {
state.exampleObject = payload;
},
},
});
3.在发送页面,将对象存储到Vuex存储中,并执行navigateTo
:
methods: {
goToDetails() {
const exampleObject = {
name: "John",
age: 30,
city: "New York",
};
this.$store.commit("setExampleObject", exampleObject);
uni.navigateTo({
url: "/pages/details/index",
});
},
},
4.在接收页面,从Vuex存储中获取对象:
export default {
data() {
return {
exampleObject: null,
};
},
onLoad() {
this.exampleObject = this.$store.state.exampleObject;
},
};
使用Vuex可以更好地管理状态和跨页面传递数据。根据您的项目需求选择适当的方法。
更多推荐
所有评论(0)