获取vue当前页面url问号后面的参数

最新推荐文章于 2024-10-11 09:11:17 发布

菜鸟笔记本

最新推荐文章于 2024-10-11 09:11:17 发布

阅读量2.5k

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_25983579/article/details/132908867

版权

vue 专栏收录该内容

50 篇文章 2 订阅

订阅专栏

本文介绍如何使用JavaScript正则表达式从URL中提取查询参数，并与VueRouter的$route.query方法进行对比，强调手动解析的适用场景和VueRouter的便捷性。

摘要由CSDN通过智能技术生成

除了使用 window.location.search 或 Vue Router 的 $route.query 来获取 URL
问号后面的参数之外，您还可以使用 JavaScript 中的正则表达式来解析 URL 中的参数部分。以下是一个示例：

// 获取当前页面的完整 URL
const currentURL = window.location.href;

// 使用正则表达式匹配 URL 中的查询参数部分
const parameterMatch = currentURL.match(/\?(.*)/);

if (parameterMatch) {
  // 如果有匹配到参数部分
  const queryString = parameterMatch[1];
  
  // 将查询参数字符串解析为对象
  const params = {};
  queryString.split('&').forEach(pair => {
    const [key, value] = pair.split('=');
    params[key] = decodeURIComponent(value);
  });
  // 使用 params 获取特定参数的值
  const parameterValue = params.parameterName;
}

这段代码首先获取当前页面的完整 URL，然后使用正则表达式 /\?(.*)/ 来匹配 URL 中的查询参数部分（问号后面的部分）。如果找到匹配，它将查询参数字符串解析为对象，并可以使用 params 获取特定参数的值。
这种方法也可以用来获取 URL 问号后面的参数，但需要更多的手动解析工作。请根据您的需求选择合适的方式。如果您的项目使用了 Vue Router，那么使用 $route.query 是更推荐的方法。