当前位置: 首页 > 工具软件 > getUrlParam > 使用案例 >

Vue中使用getUrlParam()方法来获取URL的值

欧阳骏俊
2023-12-01

Vue中使用getUrlParam()方法来获取URL的值

首先建一个GetUrlParam.js,然后在需要的页面中引入使用:

GetUrlParam.js

export  function getUrlParam(name) {
  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
}

引用

import { getUrlParam } from “…/components/GetUrlParam”;

使用:

let id = getQueryString(“ryid”); //参数名1
let model = getUrlParam(“model”); //参数名2
console.log( id )
console.log( model )

或者

编写编辑页面时候,没有引入getUrlParam()的js代码,导致编辑页面无法获取地址栏的URL参数无法获取值,加入下面这个js引用就好了。

<script type="text/javascript" src="/js/common.js"></script>

下面是getUrlParam()的实现代码:

//获取地址栏url后的参数值
function getUrlParam(key) {
   var href = window.location.href;
   var url = href.split("?");
   if(url.length <= 1){
      return "";
   }
   var params = url[1].split("&");
   
   for(var i=0; i<params.length; i++){
      var param = params[i].split("=");
      if(key == param[0]){
         return param[1];
      }
   }
}
 类似资料: