Vue router中params和query的区别

传参是前端经常需要用的一个操作，很多场景都会需要用到上个页面的参数。

params：/router/:id /router/3251，/router/7819
这个id叫做params
query：/router?id=3251,/router?id=7819
这个id叫做query

---

params传参和query传参有什么区别？

1、params是路由的一部分,如果你的路由是动态路由就必须要有。query是拼接在url后面的参数，没有也没关系。

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

比如：跳转/router1/:id

<router-link :to="{ name:'router1',params: { id: status}}" >正确</router-link>
<router-link :to="{ name:'router1',params: { id2: status}}">错误</router-link>

2、params、query不设置也可以传参

<router-link :to="{ name:'router1',params: { id: status ,id2: status3},query: { queryId:  status2 }}" >
      router-link跳转router1
  </router-link>

params不设置的时候，刷新页面或者返回参数会丢失。id这个参数是我们有设置在路由上面的，id2我没有设置在路由里面，跳转的时候，id2可以获取到，但是刷新之后id2就不见了。在项目中，我们总不可能要求用户不能刷新吧。

3.编程式的导航中，如果要传递params，只能提供name，不能使用path。这一点官网写得很清楚

push&to.png

---

参考
Vue Router
vue router 使用params query传参，以及有什么区别