傳參是前端經(jīng)常需要用的一個(gè)操作，很多場(chǎng)景都會(huì)需要用到上個(gè)頁(yè)面的參數(shù)，比如傳個(gè)id獲取個(gè)詳情信息，今天咱們就來(lái)看看Vue中是怎么實(shí)現(xiàn)這種傳遞參數(shù)得

在Vue中提供了兩種方法來(lái)進(jìn)行路由傳參：query 和 params ，下面來(lái)看看他們兩個(gè)得區(qū)別在哪里

query語(yǔ)法：

this.$router.push({path:"地址",query:{id:"123"}}); 這是傳遞參數(shù)

this.$route.query.id； 這是接受參數(shù)

params語(yǔ)法：

this.$router.push({name:"地址",params:{id:"123"}}); 這是傳遞參數(shù)

this.$route.params.id; 這是接受參數(shù)

以上就是這兩種方法得語(yǔ)法，那大家也能從中看出一點(diǎn)區(qū)別：

1.首先就是寫法得不同，query 得寫法是 用 path 來(lái)編寫傳參地址，而 params 得寫法是用 name 來(lái)編寫傳參地址，你可以看一下編寫路由時(shí)候得相關(guān)屬性，你也可以輸出一下 路由對(duì)象信息 看一下

2.接收方法不同， 一個(gè)用 query 來(lái)接收， 一個(gè)用 params 接收 ，總結(jié)就是誰(shuí)發(fā)得 誰(shuí)去接收

3.query 在刷新頁(yè)面得時(shí)候參數(shù)不會(huì)消失，而 params 刷新頁(yè)面得時(shí)候會(huì)參數(shù)消失，可以考慮本地存儲(chǔ)解決

4.query 傳得參數(shù)都是顯示在url 地址欄當(dāng)中，而 params 傳參不會(huì)顯示在地址欄

這里說(shuō)一下 route 是路由對(duì)象信息 而 router 是路由對(duì)象的 實(shí)例，區(qū)分一下

以上就是對(duì) VueRouter 兩種傳參的講解和認(rèn)知（這種寫法是編程式寫法）附上官方地址編程式導(dǎo)航， 還有那句話：如有不對(duì)之處及不周之處請(qǐng)大佬們指出，也希望對(duì)一些人有所幫助，咱們下次再會(huì)！

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的@query传参_VueRouter之query与params两种传参区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。