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

转载

mob604756e58279 2021-10-23 20:33:00

文章标签 封装 url参数 ico 路由配置刷新页面 文章分类 虚拟化云计算

这东西主要是为了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);
    };