GET请求参数中含有特殊字符# 导致Network中请求地址参数丢失的问题

在HTTP请求中，# 符号用于表示URL的锚点（fragment），因此在GET请求的URL中，如果参数包含 #，它会导致后面的内容被视为锚点而被丢弃。这会导致请求参数丢失。

为了解决这个问题，可以对特殊字符进行URL编码。对于 # 字符，可以使用 %23 进行编码。以下是一个示例，展示如何在JavaScript中进行URL编码：

const params = {  
  param1: 'value1',  
  param2: 'value#2' // 包含特殊字符#  
};  

// 使用URLSearchParams进行编码  
const queryString = new URLSearchParams(params).toString();  
const url = `https://example.com/api?${queryString}`;  

console.log(url); // 输出: https://example.com/api?param1=value1&param2=value%232

### 其他情况

1. **使用查询参数**：
   - 确保你的参数使用查询字符串的形式，而不是在 URL 中直接使用 `#`。
   - 例如，使用 `?` 来传递参数，而不是 `#`。

// 错误的方式
const url = 'https://example.com/api/resource#param=value';
// 正确的方式
const url = 'https://example.com/api/resource?param=value';

2. **URL 编码**：
   - 如果你确实需要在 URL 中使用 `#`，可以考虑对其进行 URL 编码。
   - 使用 `encodeURIComponent` 函数来编码参数。
   - 该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ *’     ( ) 。其他字符（比如 ：;/?😡&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

let url="https://www.run.com/test.php?name=ståle&car=saab#123";
document.write(encodeURIComponent(url));

结果: https%3A%2F%2Fwww.run.com%2Ftest.php%3Fname%3Dst%C3%A5le%26car%3Dsaab%23123

const param = encodeURIComponent('value#withHash');
const url = `https://example.com/api/resource?param=${param}`;

结果: https://example.com/api/resource?param=value%23withHash

3. **使用 Vue Router**：
   - 如果你在使用 Vue Router，可以通过路由参数来传递数据，而不是直接在 URL 中使用 `#`。
   - 例如：

this.$router.push({ name: 'YourRouteName', query: { param: 'value' } });

4. **检查后端处理**：
   - 确保后端能够正确处理查询参数，并且没有依赖于 URL 中的锚点。

### 示例代码

以下是一个使用 Axios 进行 GET 请求的示例：

import axios from 'axios';

const fetchData = async () => {
  try {
    const param = encodeURIComponent('value#withHash');
    const response = await axios.get(`https://example.com/api/resource?param=${param}`);
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

fetchData();

### 总结

- 避免在 GET 请求中使用 `#` 符号。
- 使用查询字符串传递参数。
- 如果需要使用特殊字符，确保进行 URL 编码。
- 考虑使用 Vue Router 进行参数传递。