vue路由传值 query和 params 有什么区别？

Question

比如都这么写，那么接收的话也都是通过 this.$router.xxx去接收啊？

<router-link :to="{name:'detail',query:{id:333}}">查看详情</router-link>
<router-link :to="{name:'detail',params:{id:333}}">查看详情</router-link>
        

Answer 1

params：/article/:id ，/article/123，/article/789 ,这里的id叫做params;

query：/article?id=123 ,/article?id=456 ,这里的id叫做query;

获取路由中参数：

$route.params

类型: Object
一个 key/value 对象，包含了 动态片段 和 全匹配片段，如果没有路由参数，就是一个空对象。

$route.query

类型: Object

一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象

Answer 2

this.$route.params这种方法用来获取url带的参数

例如url = http://127.0.0.1:5500/messageCenter/IMDetail/cb89d22a-74b0-4852-b8ee-c32003a3cec8?companyAvatar=某某.jpg&companyName=黄氏响声丸

这个url使用上面方法，获取的参数为this.$route.params = cb89d22a-74b0-4852-b8ee-c32003a3cec8

而this.$route.query这种方法用来获取url中'？'后面的参数

例如：this.$route.query.companyName = '黄氏响声丸'

this.$route.query.companyAvatar = '某某.jpg'

反过来传值方式也能理解吧？

Answer 3

简单来说
query在url上会表现为?id=333
而params的url没有这个

Answer 4

和get，post类似，query是get，params是post

Answer 5

关于vue-router的传参可以看下 vue-router基本传参方式

Answer 6

你如果了解一下 REST 风格的 URL 是如何设计的，就能明白它们之间的差异了。通常来讲，我们要传递一个参数给后端，会用 query 传参，例如：

http://www.xxx.com/user?id=1

其中 id=1就是参数，而 URL 路径是 /user。但是在 REST 里边，是这么设计的：

http://www.xxx.com/user/1

其中 1 是参数的同时也是路径的一部分，并且是动态的。那么后端（在这里就是前端路由上）会这样匹配 URL 并获取 id 参数：

/user/:id

这样传递的参数就是 params，问号好则是 query。其实两种都行的，只是取决于你采用怎样的设计。