encodeURIComponent,encodeURI的使用以及在vue中用url传值的两种方式

一、问题发生场景

在vue中使用$route的query传值方式会发现值被转为一串不易读的字符，但是不影响从query参数中获取正确的原始的传值，这本来并没有引起我的注意。后来产品提了一个需求是某个页面必须在新标签页打开，搜了下vue好像没有提供这种方法，但是用window.open('#/urlxxx?fdn=' + fdn + '&page=interface')

可以满足需求，只是期间遇到问题：

因为$route.query已经帮我们自动编码了，我们平时使用时只需要写参数和值就好，在这里我就失去了警惕，直接写上了键值对，结果vue route进行跳转时url出错url的参数会自动抹掉结果跳转在只有‘？’符号前的路径的页面。把参数值使用encodeURIComponent编码后就可以解决这个问题了。

二、引出两个知识点

1，vue中使用$route的query传的值会被自动通过encodeURIComponent转码，也就是显示在浏览器地址栏里那串不易读的字符。同样的在vue里使用$route的query取值也会自动解码。断定是encodeURIComponent而不是encodeURI的原因是我传的值里有“/”而实际地址栏里没有。

但是在vue中使用window.open()来实现url在新标签页打开传值取值时需要手动转码（当出现不合规范的字符时）。

2, vue为什么要自动进行编码呢？转义是为了符合url的规范，在标准的url规范中中文和很多的字符是不允许出现在url中的。如果我们的键值字符串中包含'&?='，服务端就无法准确解析我们的键值对了。

补充一下encodeURI/decodeURI和encodeURIComponent/decodeURIComponent的区别：

前者被设计来用于对完整URL进行URL Encode，于是URL中的功能字符，比如&, ?, /, =等等这些并不会被转义；而后者被设计来对一个URL中的值进行转义，会把这些功能字符也进行转义。

encodeURI: 不编码的符号是： A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( )

encodeURIComponent: 不编码的符号是：A-Z a-z 0-9 - _ . ! ~ * ' ( )