发送与接收
A页面发送请求的代码:
// 将数组序列化为字符串,并进行编码
const array = [1, 2, 3];
const encodedArray = encodeURIComponent(JSON.stringify(array));
// 使用编码后的字符串作为参数进行路由跳转
this.$router.push({
path: "路径",
query: { array: encodedArray },
});
B页面接收参数的代码(建议写在mounted() {},
或created() {},
里):
// 获取编码后的字符串
const encodedArray = this.$route.query.array;
// 解码字符串并将其转换回数组
const decodedArray = JSON.parse(decodeURIComponent(encodedArray));
在发送请求时,我们使用JSON.stringify()
将数组转换为字符串,然后使用encodeURIComponent()
对字符串进行编码。
在接收参数时,我们使用decodeURIComponent()
对编码后的字符串进行解码,然后使用JSON.parse()
将解码后的字符串转换回数组。
这样,就可以安全地将数组作为参数进行传递和接收。请注意,在接收参数时,需要进行错误处理和验证,以确保数据的完整性和正确性。
数据更新
在A页面带参跳转至B页面,B页面不关闭的情况下,返回A页面再次带不同的参数跳转至B页面,B页面数据不刷新
解决方法:B页面监听$route
watch: {
$route() {
console.log(this.$router.history);
//监听$router.history.current.name
if (this.$router.history.current.name == "B页面的name") {
// 页面刷新的方法
}
},
},
监听当前路由名称是否为B页面,是则执行刷新数据的方法即可
参数清除
带参数传至B页面后,不想使用浏览器F5刷新(会闪一下,效果不好),想要点击按钮手动刷新清除url中的参数
解决方法:
// 获取当前路由路径
const currentPath = this.$route.path;
// 清除参数,构建新的路由路径
const newPath = currentPath.split("?")[0];
// 使用replace方法设置新的URL,不包含参数
this.$router.replace(newPath);
首先获取当前的路由路径,然后通过使用split()
方法将路径和参数部分分开,只保留路径部分。接着使用$router.replace()
方法将新的URL设置为不带参数的路径。
这样,点击按钮后就可以清除URL中的参数。页面将会刷新且不再包含任何参数。