把带参数的url当对象一样,添加参数、修改参数值

132 阅读2分钟

好的,我来详细解释一下这个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"

这个方法的优点是:

  1. 可以处理任何URL格式
  2. 不会破坏原有的参数(除非要更新)
  3. 可以同时添加和更新多个参数
  4. 代码简洁且易于维护

在你的分享场景中,你可以这样使用:

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,都能正确处理。