案例:JS获取URL中参数值的方法(获取浏览器地址的参数)

假设地址栏地址是:http://localhost:3000/m/productlist.html?search=%E9%9E%8B
思路分析:
1.location.search//得到?search=%E9%9E%8B
2.location.search.substring(1)//"search=%E9%9E%8B"(substring是截取字符串,参数1代表从什么时候截取,参数二代表结束位置)
3.location.search.substring(1).split('=');//["search", "%E9%9E%8B"],split是分割的意思
4.location.search.substring(1).split('=').[1]//"%E9%9E%8B"
5.decodeURI("%E9%9E%8B")//鞋

真实案例:
方法1:

// http://localhost:3000/m/productlist.html?search=%E9%9E%8B&price=1&num=2
// 根据url中参数名获取值
// ?search=%E9%9E%8B&price=1&num=2 参数
// 参数名 = search  参数值 = 鞋
// 参数名 = price  参数值 = 1
// 参数名 = num  参数值 = 2
function getQueryString(name){
	// console.log(location);
	// console.log(location.search);
	// 1. 获取整个url参数的值的字符串 去掉第一个字符串 按照&分割成一个数组
	var urlParams = location.search.substr(1).split('&');
	// var urlParams = location.search.substring(1,location.search.length);
	// console.log(urlParams);
	for (var i = 0; i < urlParams.length; i++) {
		// search=%E9%9E%8B  =前面参数名 以=分割 如果等号前面的和参数名一样 返回=号后面的参数的值
		if(name == urlParams[i].split('=')[0]){
			// 返回当前参数的值 同时转码
			return decodeURI(urlParams[i].split('=')[1]);
		}
	}
}
console.log(getQueryString('search'));//鞋
console.log(getQueryString('price'));//1
console.log(getQueryString('num'));//2

方法2:(参考文档:https://www.cnblogs.com/jiguisheng/p/5735030.html)

function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var r = window.location.search.substr(1).match(reg);
    //console.log(r);
    if (r != null) {
        //转码方式改成 decodeURI
        return decodeURI(r[2]);
    }
    return null;
}

补充:vue默认hase路由中获取的方法:
getUrlKey: function(name) {
return (
decodeURIComponent(
(new RegExp(
‘[?|&]’ + name + ‘=’ + ‘([^&;]+?)(&|#|;|$)’
).exec(location.href) || [, ‘’])[1].replace(/+/g, ‘%20’)
) || null
)
},

getUrlKey(‘token’)调用即可。