JS获取地址栏参数的几种方法

JS获取地址栏参数的几种方法

 

<script>

 // 获取地址栏的参数数组
 function getUrlParams() {
  var search = window.location.search;
  // 写入数据字典
  var tmparray = search.substr(1, search.length).split("&");
  var paramsArray = new Array;
  if (tmparray != null) {
   for (var i = 0; i < tmparray.length; i++) {
    var reg = /[=|^==]/;    // 用=进行拆分,但不包括==
    var set1 = tmparray[i].replace(reg, '&');
    var tmpStr2 = set1.split('&');
    var array = new Array;
    array[tmpStr2[0]] = tmpStr2[1];
    paramsArray.push(array);
   }
  }
  // 将参数数组进行返回
  return paramsArray;
 }

 // 根据参数名称获取参数值
 function getParamValue(name) {
  var paramsArray = getUrlParams();
  if (paramsArray != null) {
   for (var i = 0; i < paramsArray.length; i++) {
    for (var j in paramsArray[i]) {
     if (j == name) {
      return paramsArray[i][j];
     }
    }
   }
  }
  return null;
 }


function test()
{
    alert("v="+getParamValue("name"));
}

var test1= function()
{
  //alert("v1="+getParamValue("name"));
  //alert("v2="+GetUrlParam("name"));
  //alert("v3="+GetUrlParms("name"));
  alert("v4="+getQuery("name"));

  
}


function GetUrlParam(paramName) {
 var url = document.URL; //URL参数,你也可以用document.URL来获取,方法太多了
 var oRegex = new RegExp('[\?&]' + paramName + '=([^&]+)', 'i');
 //var oMatch = oRegex.exec( window.top.location.search ) ; //获取当前窗口的URL
 var oMatch = oRegex.exec(url);
 if (oMatch && oMatch.length > 1)
  return oMatch[1]; //返回值
 else
  return '';
}

//获取url参数
function GetUrlParms(name) {
 var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
 if (reg.test(location.href))
  return unescape(RegExp.$2.replace(/\+/g, " "));
 return "";
}


var getQuery = function (i) {
 
 var j = location.search.match(new RegExp("[?&]" + i + "=([^&]*)(&?)", "i"));
 
 return j ? j[1] : j
 
};

 

</script>


JS获取地址栏参数 :<br>


<a href="#" οnclick="test1();">获取参数值</a>

<think>好的,我现在需要帮助用户解决在Nuxt.js获取URL查询参数的问题。首先,我得回忆一下Nuxt.js的基本结构和路由机制。根据用户提供的引用内容,特别是引用[2]和[3],Nuxt.js的路由是基于文件系统的,动态路由通过创建类似_postId.vue的文件来处理。 用户的问题是关于获取URL的查询参数,也就是query参数。在Vue.js中,通常是通过this.$route.query来获取,但Nuxt.js作为基于Vue的框架,可能有类似的方法,不过需要考虑SSR的情况。 根据引用[2],动态路由参数可以通过$route.params获取,但用户需要的是查询参数,也就是类似?key=value的部分。这时候可能需要检查Nuxt.js的上下文对象context,因为在asyncData和fetch方法中,可以通过context.query来访问查询参数。同时,在页面组件中,也可以通过this.$route.query来获取,这和Vue.js的方式一致。 需要确认的是,在Nuxt.js的生命周期钩子中,比如asyncData和fetch,是否推荐使用context.query,而在客户端是否使用this.$route.query。同时,要注意SSR和客户端环境下的差异,确保参数在两种环境下都能正确获取。 另外,用户可能是在不同的场景下获取参数,比如在页面组件初始化时,或者在方法中动态获取。需要分别说明不同的方法,并给出示例代码,比如在asyncData中使用context.query,在mounted中使用this.$route.query,或者通过watch监听路由变化。 还要考虑Nuxt.js的版本差异,但用户提供的引用中没有提到版本,所以默认使用通用的方法。最后,需要总结几种常见的方法,并提醒用户注意参数的编码问题和动态路由参数与查询参数的区别。 可能还需要生成相关问题,比如如何获取动态路由参数、如何处理参数变化等,以帮助用户进一步学习。</think>在Nuxt.js获取URL地址栏的查询参数(即query参数)可以通过以下三种方法实现,均兼容服务端渲染(SSR)和客户端场景: 1. **通过上下文对象`context`获取** 在页面组件的`asyncData`或`fetch`方法中,直接访问上下文提供的`query`属性: ```javascript async asyncData({ query }) { return { category: query.category_id, // 获取?category_id=xxx参数 keyword: query.q || '' // 获取?q=xxx参数(带默认值) } } ``` 2. **通过`$route`对象获取** 在Vue实例方法或模板中,使用Vue Router的标准API: ```javascript mounted() { console.log(this.$route.query.page) // 获取?page=xxx参数 } ``` 3. **使用`watchQuery`属性监听参数变化** 在页面组件中添加自动监听机制: ```javascript export default { watchQuery: ['page'], // 当?page变化时自动刷新组件 methods: { loadData() { const currentPage = this.$route.query.page || 1 // 加载对应页码数据 } } } ``` **注意事项:** - 动态路由参数(如`/user/:id`)需通过`$route.params`获取,与查询参数属于不同对象[^2] - 参数值默认是字符串类型,数字类型需要手动转换 - 在服务端渲染时,`asyncData`中的`context.query`能直接读取初始参数 - 建议对敏感参数进行验证和编码处理 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值