(巨好使,详细,解析URl,URl自定义传参)js URl中快速自定义传参,并且实现参数解析 修改 和新增,替换功能

背景

我们在日常开发中经常会遇到要对url中的参数进行修改和新增,但是自己手动每次敲就会导致代码很麻烦,且不易维护

而且可能会遇到一些特殊的需求,需要携带固定参数,进行页面的多次跳转这种情况(!!!)

方法

1.解析url中的参数(将正确的url地址输进去,自动返回解析以后的参数)

//获取url路径中的参数
const getQuery = (url) => {
    // result为存储参数键值的集合
    const result = {}
    //建立正则匹配路径中有没有问号
    var reg = /\?/g
    if (reg.test(url)) {
        // str为?之后的参数部分字符串
        const str = url.substr(url.indexOf('?') + 1)
        // arr每个元素都是完整的参数键值
        const arr = str.split('&')
        for (let i = 0; i < arr.length; i++) {
            // item的两个元素分别为参数名和参数值
            const item = arr[i].split('=')
            result[item[0]] = item[1]
        }
    }
    return result
}

2. 进行url参数的修改,更新,以及覆盖功能

const chanUrlData = (hostUrl='',orignJson={},newJson={}) => {
    //快速自定义url路径中的参数的原理,首先将url中的数据json获取下来,然后通过遍历将url中的数据进行新增和覆盖
    //1. hostUrl='链接的host地址(链接'?'之前的部分) https://blog.csdn.net/qq_59747594/article/details/126397187'
    //2. orignJson='链接中问号后面的json数据' {name:wang,sex:1}
    //3. newJson='自定义在url里面路径的参数' {name:wangzhaoyang,money:1000000}
    for (let x in newJson) {
        orignJson[x] = newJson[x]
    }
    var newDataJson=[]//用来接收最新的生成url参数数据
    for (var item in orignJson) {
        newDataJson.push(item + '=' + orignJson[item])
    }
    if(newDataJson.length>0){
        return hostUrl+'?'+newDataJson.join('&')
    }else{
        return hostUrl
    }
}

使用(仔细体会一下结果的那张截图)

var urlStr='https://blog.csdn.net/qq_59747594/article/details/126397187?name=wang&sex=1'
console.log(getQuery(urlStr))
console.log(chanUrlData(urlStr.split('?')[0],getQuery(urlStr),{
    name:'wangzhaoyang',
    money:10000000
}))

解释 

就是为什么方法一和方法二我没有写在一块,那样不更简单吗,其实不然,因为在某些特殊的情况下,不需要进行url的解析直接就可以更简单拿到url中的数据

window.local(最方便兼容各种js)拿到路径全部信息(hash,host,hostname,href,origin,pathname,port,protocol)以及跳转路由__揽的博客-CSDN博客_js获取路由hash

uniapp,微信中

var pages = getCurrentPages();//获取所有页面的数组对象
var currPage = pages[pages.length - 1]; //当前页面
var beforePage= pages[pages.length - 2]; //上一个页面

(uniapp跳转回显),A页面进入B页面,B页面返回A页面,并传值给A页面(技巧绝对好用慢慢看)__揽的博客-CSDN博客_uniapp 页面返回传值

猜你喜欢

转载自blog.csdn.net/qq_59747594/article/details/127151053