vue 获取url里参数的两种方法小结

下面我将为您详细讲解“vue 获取url里参数的两种方法小结”的完整攻略。

下面我将为您详细讲解“vue 获取url里参数的两种方法小结”的完整攻略。

一、 获取参数的两种方法

方法一：使用正则表达式

这种方法需要使用正则表达式来获取url里的参数，步骤如下：

1. 获取当前页面的url

let url = window.location.href;

1. 编写正则表达式，获取url里的参数

假设我们要获取名为“id”的参数，正则表达式如下：

let reg = new RegExp("(^|&)id=([^&]*)(&|$)");
let id = url.match(reg)[2];

这里通过正则表达式匹配url里的“id”参数，获取该参数的值。

方法二：使用URLSearchParams API

这种方法需要使用JavaScript标准API中的URLSearchParams，步骤如下：

1. 获取当前页面的url

同样的，先获取当前页面的url：

let url = window.location.href;

1. 使用URLSearchParams API获取参数

let params = new URLSearchParams(url.search);
let id = params.get("id");

这里使用URLSearchParams的get()方法直接获取名为“id”的参数值。

二、 示例说明

下面是两个示例说明，演示在vue中如何使用上述两种方法获取url里的参数：

示例一：使用正则表达式

在vue的mounted()方法中添加以下代码即可获取名为“id”的参数：

mounted() {
  let url = window.location.href;
  let reg = new RegExp("(^|&)id=([^&]*)(&|$)");
  let id = url.match(reg)[2];
  console.log(id); // 打印出参数值
}

示例二：使用URLSearchParams API

同样的，在vue的mounted()方法中添加以下代码，即可使用URLSearchParams API获取名为“id”的参数：

mounted() {
  let url = window.location.href;
  let params = new URLSearchParams(url.search);
  let id = params.get("id");
  console.log(id); // 打印出参数值
}

以上就是我给您总结的vue获取url里参数的两种方法以及示例说明。