鍍金池/ 問答/HTML/ vue路由傳值 query和 params 有什么區(qū)別？

vue路由傳值 query和 params 有什么區(qū)別？

比如都這么寫，那么接收的話也都是通過 this.$router.xxx去接收啊？

<router-link :to="{name:'detail',query:{id:333}}">查看詳情</router-link>
<router-link :to="{name:'detail',params:{id:333}}">查看詳情</router-link>
回答
編輯回答
柚稚

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

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

獲取路由中參數(shù)：

$route.params

類型: Object
一個(gè) key/value 對象，包含了 動(dòng)態(tài)片段 和 全匹配片段，如果沒有路由參數(shù)，就是一個(gè)空對象。

$route.query

類型: Object

一個(gè) key/value 對象，表示 URL 查詢參數(shù)。例如，對于路徑 /foo?user=1，則有 $route.query.user == 1，如果沒有查詢參數(shù)，則是個(gè)空對象
2017年2月6日 20:42
編輯回答
夢囈

this.$route.params這種方法用來獲取url帶的參數(shù)

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

這個(gè)url使用上面方法，獲取的參數(shù)為this.$route.params = cb89d22a-74b0-4852-b8ee-c32003a3cec8

而this.$route.query這種方法用來獲取url中'？'后面的參數(shù)

例如：this.$route.query.companyName = '黃氏響聲丸'

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

反過來傳值方式也能理解吧？

2017年5月27日 10:15
編輯回答
夏夕

你如果了解一下 REST 風(fēng)格的 URL 是如何設(shè)計(jì)的，就能明白它們之間的差異了。通常來講，我們要傳遞一個(gè)參數(shù)給后端，會(huì)用 query 傳參，例如：

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

其中 id=1就是參數(shù)，而 URL 路徑是 /user。但是在 REST 里邊，是這么設(shè)計(jì)的：

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

其中 1 是參數(shù)的同時(shí)也是路徑的一部分，并且是動(dòng)態(tài)的。那么后端（在這里就是前端路由上）會(huì)這樣匹配 URL 并獲取 id 參數(shù)：

/user/:id

這樣傳遞的參數(shù)就是 params，問號(hào)好則是 query。其實(shí)兩種都行的，只是取決于你采用怎樣的設(shè)計(jì)。

2018年6月9日 18:34
編輯回答
鐧簞噯

關(guān)于vue-router的傳參可以看下 vue-router基本傳參方式

2017年9月1日 21:11
編輯回答
瘋子范

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

2018年3月5日 06:23
編輯回答
故林

簡單來說
query在url上會(huì)表現(xiàn)為?id=333
而params的url沒有這個(gè)

2017年10月17日 20:18