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

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];
      }
   }
}