如何从URL中获取指定参数？Vue跨端参数获取问题

直接使用浏览器原生的URLSearchParams API是最可靠的方式，它能自动解析URL中的查询参数，完全不依赖参数顺序：

const url = window.location.href;
// 分离#之前的部分，避免hash片段干扰参数解析
const urlWithoutHash = url.split('#')[0];
// 基于查询字符串创建URLSearchParams实例
const searchParams = new URLSearchParams(urlWithoutHash.split('?')[1]);

// 直接通过参数名获取对应值
this.iotId = searchParams.get('iotId');
this.platform = searchParams.get('platform');

方案优势 #

• URLSearchParams是浏览器标准API，iOS和Android的WebView均支持，会自动处理参数顺序、URL编码等细节
• 无需手动拆分字符串，彻底避免参数顺序变化导致的解析失败

旧环境兼容方案（针对不支持URLSearchParams的WebView） #

如果遇到老旧WebView环境，可以实现一个通用的参数解析函数：

function getUrlParam(url, paramName) {
    // 提取查询字符串部分
    const queryString = url.split('#')[0].split('?')[1];
    if (!queryString) return null;
    
    // 拆分所有参数为键值对
    const params = queryString.split('&');
    for (const param of params) {
        const [key, value] = param.split('=');
        if (key === paramName) {
            // 解码URL编码的特殊字符
            return decodeURIComponent(value);
        }
    }
    return null;
}

// 使用示例
const url = window.location.href;
this.iotId = getUrlParam(url, 'iotId');
this.platform = getUrlParam(url, 'platform');

该函数会遍历所有参数，通过参数名匹配对应值，同样不受参数顺序影响。

内容的提问来源于stack exchange，提问作者Chaoyi Ying