Vue-路由传参 params 与 query的使用和区别

记得初学Vue的时候，不知道如何通过路由跳转界面并传参，去面试也有问到，当时就很尴尬，这么基础的东西说出来不知道，没用过，真的好难堪，谁也不是一开始就什么都会，不懂得及时去查，时间长了总会理解，孰能生巧，这不最近在我工作中常常有跳转页面的需求，下面我跟大家说说params和query两种方式的区别

query传参：

params传参：

需要注意的是：

1、params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。

2、params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。

如果路由后面没有 /:id/:name效果如下图，地址栏没有参数

**但是如果你刷新一下，就会发现页面失败，此时我们就可以路由解耦

得方式来解决，具体得 *** 作请看： https://www.jianshu.com/p/9583a3b56475

**

从源码里看，最明显的一个区别，add方法可以给同一个key值传多个value，它会存在一个list里面；而put方法只能给同一个key传唯一一个value，如果传多个后一个会替换掉前一个。

当然，其实api里的描述也很清楚了。

voidadd(java.lang.String key, java.lang.String value)

Adds string value to param which can have more than one value.

添加字符串给param，并且可以传不止一个。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

voidput(java.lang.String key, java.lang.String value)

Adds a key/value string pair to the request.

添加一个字符串键值对给request。

---