方法一: 使用 URLSearchParams。不兼容IE,但可以安装 url-search-params-polyfill 垫片。
/** * 获取当前路由参数 * @param name 参数名称 * @returns {string | object} 指定参数名称时返回参数值;未指定参数名称时返回全部参数对象,链接无参数时返回空对象 {} */export function getURLParams (name) { const search = location.search.substr(1) const urlSearchEntries = new URLSearchParams(search).entries() // URLSearchParams不兼容IE const params = Object.fromEntries(urlSearchEntries) // 转化 URL 参数 const transParams = _.mapValues(params, (value) => { let tempValue = value try { tempValue = JSON.parse(value) } catch (error) { // 转化异常则直接使用初始值 } return tempValue }) if (name && typeof name === 'string') { return transParams[name] || '' } else { return transParams }}
方法二: 无兼容性问题
/** * 获取当前路由参数 * @param name 参数名称 * @returns {string | object} 指定参数名称时返回参数值;未指定参数名称时返回全部参数对象,链接无参数时返回空对象 {} */
export function getURLParams (name) { const params = {} if (location.search.indexOf('?') !== -1) { const searchGroup = location.search.substring(1).split('&') for (let i = 0; i < searchGroup.length; i++) { const key = searchGroup[i].split('=')[0] let value = decodeURIComponent(searchGroup[i].split('=')[1]) try { value = JSON.parse(value) } catch (error) { // 转化异常则直接使用初始值 } params[key] = value } } if (name && typeof name === 'string') { return params[name] || '' } else { return params }}
方法三: 正则,这是非常中规中举的一种方法,重点是要求我们要懂正则表达式。
function queryURLParams(url) { let pattern = /(\w+)=(\w+)/ig; //定义正则表达式 let parames = {}; // 定义参数对象 url.replace(pattern, ($, $1, $2) => { parames[$1] = $2; }); return parames;}