params传参处理

params传参处理

一、 路由传参分为params传参与query传参

• params传参类似于网络请求中的post请求，params传过去的参数不会显示在地址栏中，但是不能刷新，params只能配合name使用，如果提供了path，params会失效。
• query 传参类似于网络请求中的 get 请求，query 传过去的参数会拼接在地址栏中（?name=xx）。query 较为灵活既可以配合 path 使用，也能配合 name 使用。

二、如果是get请求且传参为params类型，需要将params转换成能拼接在浏览器地址栏的形式

//如果是get请求且传params类型参数
if(config.method==='get' && config.params){
    //将params参数转换后拼接到url后面
	let url = config.url + transParams(config.params)
	//截取有效url
	url = url.slice(0,-1)
	config.params = {}
	config.url = url
}

export function transParams(params){
	let result = ''
	//遍历params数组对象，propName为数组中的key
    for (const propName of Object.keys(params)) {
    	//获取value
        const value = params[propName];
        //转码，类似https%3A%2F%2Fwww.runoob.com%2Fmy%20test.php%3Fname%3Dst%C3%A5le%26car%3Dsaab
        let part = encodeURIComponent(propName) + "=";
        if (value !== null && value !== "" && typeof (value) !== "undefined") {
        	//如果value是object对象，需要向内再遍历
            if (typeof value === 'object') {
                for (const key of Object.keys(value)) {
                    if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') {
                        let params = propName + '[' + key + ']';
                        let subPart = encodeURIComponent(params) + "=";
                        result += subPart + encodeURIComponent(value[key]) + "&";
                    }
                }
            } else {
            	//拼接
                result += part + encodeURIComponent(value) + "&";
            }
        }
    }
    return result
}