好的,我来详细解释一下这个updateUrlParams方法的工作原理,我们一步步拆解:
updateUrlParams(url, updateParams) {
// 第一步:分割URL和参数
const [path, queryString = ''] = url.split('?');
// 例如:url = "pages/user/index?id=123&name=test"
// path = "pages/user/index"
// queryString = "id=123&name=test"
// 第二步:解析现有参数
let params = {};
if (queryString) {
params = queryString.split('&').reduce((acc, curr) => {
if (curr) {
const [key, value] = curr.split('=');
acc[key] = value;
}
return acc;
}, {});
}
// 将 "id=123&name=test" 转换成对象:
// params = { id: "123", name: "test" }
// 第三步:更新参数
Object.assign(params, updateParams);
// 如果 updateParams = { referrerId: "456" }
// 现在 params = { id: "123", name: "test", referrerId: "456" }
// 第四步:构建新的查询字符串
const newQueryString = Object.entries(params)
.map(([key, value]) => `${key}=${value}`)
.join('&');
// 将对象转回字符串:
// "id=123&name=test&referrerId=456"
// 第五步:返回完整URL
return newQueryString ? `${path}?${newQueryString}` : path;
// 最终返回:
// "pages/user/index?id=123&name=test&referrerId=456"
}
让我们看几个使用示例:
// 示例1:向没有参数的URL添加参数
const url1 = "pages/user/index";
const result1 = updateUrlParams(url1, { referrerId: "123" });
// 结果:"pages/user/index?referrerId=123"
// 示例2:更新已有参数
const url2 = "pages/user/index?referrerId=old&type=vip";
const result2 = updateUrlParams(url2, { referrerId: "new" });
// 结果:"pages/user/index?referrerId=new&type=vip"
// 示例3:同时添加和更新多个参数
const url3 = "pages/user/index?id=123";
const result3 = updateUrlParams(url3, {
name: "test", // 新增参数
id: "456" // 更新已有参数
});
// 结果:"pages/user/index?id=456&name=test"
这个方法的优点是:
- 可以处理任何URL格式
- 不会破坏原有的参数(除非要更新)
- 可以同时添加和更新多个参数
- 代码简洁且易于维护
在你的分享场景中,你可以这样使用:
onLoad(options) {
let router = this.$Router.currentRoute;
let fullPath = router.fullPath;
// 更新或添加 referrerId
let path = this.updateUrlParams(fullPath, {
referrerId: this.member.id
});
this.setShareInfo({
title: ' ',
path: path,
image: ''
});
}
这样无论原来的URL是否包含referrerId,都能正确处理。