URL跳转空白页参数传递封装

这东西主要是为了vue和平时打开一个空白界面_blank时的参数传递，不涉及到浏览器存储（session,local等）

众所周知，请求传参无非就用的query和params，相对应就是get和post，在当前界面下进行跳转情况下，使用

this.$router.push({ 
    path:'/xxx',
    query: {
        id:"xxxxxx"
    }
})

//接收参数
this.$route.query.id

或者这样

this.$router.push({ 
    path:'/xxx',
    name:'xxx',  //params传参 需要使用 name 否则取不到；对应路由配置的 name
    params: {
        id:"xxxxxx"
    }
})

//接收参数
this.$route.params.id

使用params传参时 刷新页面参数消失
配置路由 在path加 /:id 对应需要传的参数名

//路由配置
 path: '/userManager/:id',

注意 ：传参是 router，接收参数是 route

上面是在同界面传参跳转，下面的是跳转到空白界面带参数方法

//打开新页面
var { href } = this.$router.resolve({
    path: '/showDocPdf',
    query: {
        pdfUrl: item.id
    }
});
window.open(href);


//新界面接收参数
created() {
  	var id = this.$route.query.pdfUrl;
}

---

 

上面是对vue的跳转方式进行总结，下面是对于原生js的跳转空白页传参跳转后获取传参的值

第一种就是，单独取值，要什么取什么

/**
     * title: 获取URL参数
     * name：key的名称
     * 公司大佬的封装函数，借用学习一番
     **/
function getUrlParam(name, url) {
  url = url || window.location.href; // 不传默认拿当前的url
  url = url.toString();
  var newUrl, reg, result;
  newUrl = url.substr(url.indexOf('?') + 1, url.length);
  reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); 
  result = newUrl.match(reg);
  if (result !== null) {
    result = decodeURIComponent(decodeURI(result[2])); //防止二次编码情况 //完全解码
    return xss(result); //防止参数展示时xss攻击---方法就自己写了，本人也看不懂xss的拦截
  }
  return '';

};

 然后有个替换URL的参数方法，没有就添加进去，这个功能个人觉得很鸡肋，没啥作用

/**
     * title: 替换url参数,没有则添加
     * key：key名称
     * value：替换的值
     * url：替换的url，默认本窗口url
     **/
    function changeURL(key, value, url) {
        url = url || window.location.href;
        var par = key + "=" + value;
        if (url.indexOf("?" + key + "=") == -1 && url.indexOf("&" + key + "=") == -1) {
            var flag = url.indexOf("?") >= 0 ? "&" : "?";
            url = url + flag + par;
        } else {
            url = url.replace(eval('/(' + key + '=)([^&]*)/g'), par);
        }
        return url;
    };

上面是对一个值单独获取，下面是一次性拿取url的所有传值

/**
     * title: url参数转成json对象
     * url：默认本窗口url
     **/
    function paramToJson(url) {
        url = url || window.location.href; // 获取当前浏览器的URL
        var param = {};
        url.replace(/([^?&]+)=([^?&]+)/g, function (s, v, k) {
            param[v] = decodeURIComponent(k); //解析字符为中文
            return k + '=' + v;
        });
        return param;
    }

对于这个decodeURIComponent函数可能自己一直都用不到吧orz，JS解码的函数

 然后又看到了大佬封装的新打开窗口可以设置窗口参数的方法，类似弹窗广告那种吧，缺点也写的很清楚，会给拦截（大概是给当成广告了）

 

/**
     * title: 弹出新窗口中打开链接(会被拦截,不推荐使用)
     * url：打开路径
     * winName：窗口名称
     * parameters：窗口参数,没有则默认全屏(有width=*,height=*宽高则默认居中)
     **/
    that.openWin = function (url, winName, parameters) {
        winName = winName || '_blank';
        parameters = parameters || '';
        if (url.length == '0') {
            return;
        }
        var winW, winH, top, left, param = 'toolbar=no, menubar=no, scrollbars=yes, resizable=no, location=no, status=no,';

        winW = that.getUrlParam('width', '?' + parameters.replace(',', '&'));
        winH = that.getUrlParam('height', '?' + parameters.replace(',', '&'));
        if (winW && winH) {
            //获得窗口的垂直位置
            top = (window.screen.availHeight - 50 - Number(winH.replace('px', ''))) / 2;
            //获得窗口的水平位置
            left = (window.screen.availWidth - 20 - Number(winW.replace('px', ''))) / 2;
            param += 'left=' + left + ',top=' + top + ',';
        }

        if (parameters) {
            param += parameters;
        } else {
            param = 'width=' + (window.screen.availWidth - 20) + ',height=' + (window.screen.availHeight - 50) + ',top=0,left=0,' + param;
        }

        if (/.*[\u4e00-\u9fa5]+.*$/.test(url)) {
            url = encodeURI(encodeURI(url)); //含有中文则编码
        }
        window.open(url, winName, param);
    };

 暂时就写道这吧，后面还有挺多url函数的封装方法，有时间再来补充了