场景：项目中存在一个列表，用户可以根据名字对列表进行筛选，此时，如果用户 输入%，需要通过 query 的方式传给后端，此时就会出现: http:// xxxxx?name=% 这样的请求, 这样后端是无法获取到这个 name 的值 %的
原因：% # & = ? / + 对 url 来说属于特殊字符，在 URL 中有特殊含义，如果 不加处理，后端就无法获取到相应的内容
解决方法：如果要传递这些特殊字符给后端，需要对它们进行转义，转化为：%加字符的ASCII码，转化方法也非常简单只需要采用 浏览器中默认提供的方法encodeURIConponent() 帮我们转义即可
例如：
-
+转为%2B：URL 中的 + 表示空格 -
%转为%25：指定特殊字符 -
?转为%3F：分隔实际的URL和参数 -
/转为%2F：分隔目录和子目录 -
#转为%25：hash 书签 -
&转为%26：URL 中指定的参数间的分隔符 -
=转为%3D：URL中指定参数的值
知识拓展：encodeUrl 与 encodeUrlComponent的区别
- encodeURI 仅编码 URL 中完全禁止的字符。
- encodeURIComponent 也编码这类字符，此外，还编码 #，$，&，+，,，/，:，;，=，? 和 @ 字符。
所以，对于一个 URL 整体，我们可以使用 encodeURI：
// 在 url 路径中使用西里尔字符
let url = encodeURI('http://site.com/привет');
console.log(url); // http://site.com/%D0%BF%D1%80%D0%B8%D0%B2%D0%B5%D1%82
……而对于 URL 参数，我们应该改用 encodeURIComponent：
let music = encodeURIComponent('Rock&Roll');
let url = `https://google.com/search?q=${music}`;
console.log(url); // https://google.com/search?q=Rock%26Roll
将其与 encodeURI 进行比较：
let music = encodeURI('Rock&Roll');
let url = `https://google.com/search?q=${music}`;
console.log(url); // https://google.com/search?q=Rock&Roll
我们可以看到，encodeURI 没有对 & 进行编码，因为它对于整个 URL 来说是合法的字符。
但是，我们应该编码在搜索参数中的 & 字符，否则，我们将得到 q=Rock&Roll —— 实际上是 q=Rock 加上某个晦涩的参数 Roll。不符合预期。
因此，对于每个搜索参数，我们应该使用 encodeURIComponent，以将其正确地插入到 URL 字符串中。最安全的方式是对 name 和 value 都进行编码，除非我们能够绝对确保它只包含允许的字符。
