1. 程式人生 > 其它 >URL跳轉空白頁引數傳遞封裝

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函式的封裝方法,有時間再來補充了