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传参,以及有什么区别

推荐阅读更多精彩内容