获取页面的url及参数获取页面的url及参数

获取页面的url及参数

一、获取当前页面的url及参数

获取路由地址: 完整url可以用 window.location.href

路由路径可以用 this.$route.path

路由路径参数 this.$route.params

eg：

/user/:id → /user/2044011030 → this.$route.params.id

路由查询参数 this.$route.query

eg：

/user/search?name=sf → this.$route.query.name

二、封装获取地址栏（url）参数方法

方法1：通过location上的search方法,支持所有模式

  function getUrlParam(name, url) {
    let qs = arguments[1] || loaction.search.length > 0 ? location.search.substring(1) : '',
    	args = {};
    for(let item of qs.split("&").map(val => val.split("="))) {
    	return name == item[0] ? item[1] : '';
    };
  };
  
  //https://cdn.demo.com/index.html?gameid=1024&posid=996&autoopenpage=true
  
  getUrlParam("gameid"); // 1024
  getUrlParam("posid"); // 996
  getUrlParam("autoopenpage"); // true
  getUrlParam("nothing"); // ''

方法2：通过location上的search方法和URLSearchParams，支持所有模式

  function getUrlParam(name, url) {
    let qs = arguments[1] || location.search.length > 0 ? location.search.substring(1) : '',
    	args = {};
    let searchParams = new URLSearchParams(qs);
    return searchParams.get(name) ? searchParams.get(name) : '';
  };
  
  //https://cdn.demo.com/index.html?gameid=1024&posid=996&autoopenpage=true
  
  getUrlParam("gameid"); // 1024
  getUrlParam("posid"); // 996
  getUrlParam("autoopenpage"); // true
  getUrlParam("nothing"); // ''

方法3：通过正则匹配

  function getUrlParam(name, url) {
    let u = arguments[1] || window.location.href,
        reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"),
        r = u.substr(u.indexOf("?") + 1).match(reg);
    return r != null ? decodeURI(r[2]) : "";
  };
 
  //https://cdn.demo.com/index.html#/?gameid=1024&posid=996&autoopenpage=true
  
  getUrlParam("gameid"); // 1024
  getUrlParam("posid"); // 996
  getUrlParam("autoopenpage"); // true
  getUrlParam("nothing"); // ''

当前模式下获取到的最后一个有效参数值包含了’#/',具体原因为hash和history模式导致，如果不支持history，会自动补齐#/

  function getUrlParam(name, url) {
    let qs = arguments[1] || window.location.href,
        reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"),
        r = qs.substr(qs.indexOf("?") + 1).match(reg);
    if(r !== null){
      let i = decodeURI(r[2]).indexOf('#');
      if(i !== -1) {
        return decodeURI(r[2]).substring(0,i);
      }else{
        return decodeURI(r[2]);
      };
    }else{
      return '';
    };
  };
  
  //https://cdn.demo.com/index.html?gameid=1024&posid=996&autoopenpage=true
  
  getUrlParam("gameid"); // 1024
  getUrlParam("posid"); // 996
  getUrlParam("autoopenpage"); // true
  getUrlParam("nothing"); // ''

最后

以上就是幸福百褶裙为你收集整理的获取页面的url及参数获取页面的url及参数的全部内容，希望文章能够帮你解决获取页面的url及参数获取页面的url及参数所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。