获取url动态参数

 不包含 hash(即 #)的 URL

const queryString = window.location.search;
const searchParams = new URLSearchParams(queryString);

const cdlParams = {};

for (const [key, value] of searchParams.entries()) {
  if (key.startsWith('cdl_')) {
    cdlParams[key] = value;
  }
}

console.log(cdlParams); // 输出带有 cdl_ 前缀的参数及其对应的值

 包含 hash(即 #)的 URL

 searchParams (mark) { // 取url动态参数
      const url = window.location.href;
      const queryString = url.split('?')[1];
      const cdlParams = {};
      if (queryString) {
        const searchParams = new URLSearchParams(queryString);
        for (const [key, value] of searchParams.entries()) {
          if (key.startsWith(mark)) {
            cdlParams[key] = value;
          }
        }
      }
      return cdlParams;
 },

 使用:

 created () { 
    this.biSearch = this.searchParams('cdl_')
    console.log(this.biSearch);
  },

注:window.location.search 只会返回问号后的查询字符串,而不包括 # 及其后面的内容,所以使用 window.location.href 来获取完整的 URL,通过split 分割 获取?后字符串

释: const searchParams = new URLSearchParams(queryString)

 是使用 JavaScript 的内置 URLSearchParams 对象来创建一个包含查询字符串参数的实例.

    const [key, value] of searchParams.entries() 

是 JavaScript 中的解构赋值语法,用于从一个数组或类数组对象中提取值,并将它们赋给变量。

在这个特定的语句中,searchParams.entries() 返回一个迭代器对象,该对象包含查询字符串中的每个键值对。每个键值对都是一个具有两个元素的数组,第一个元素是键,第二个元素是值。

通过使用解构赋值语法,我们可以将键值对数组的第一个元素赋给变量 key,将第二个元素赋给变量 value。这样,我们就可以在循环中访问每个键和值,并对它们进行操作。

你可能感兴趣的:(javascript,前端,vue.js)