URL跳轉空白頁引數傳遞封裝
阿新 • • 發佈:2021-10-23
這東西主要是為了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函式的封裝方法,有時間再來補充了