傳參是前端經常需要用的一個操作，很多場景都會需要用到上個頁面的參數，比如傳個id獲取個詳情信息，今天咱們就來看看Vue中是怎么實現這種傳遞參數得

在Vue中提供了兩種方法來進行路由傳參：query 和 params ，下面來看看他們兩個得區別在哪里

query語法：

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

this.$route.query.id； 這是接受參數

params語法：

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

this.$route.params.id; 這是接受參數

以上就是這兩種方法得語法，那大家也能從中看出一點區別：

1.首先就是寫法得不同，query 得寫法是 用 path 來編寫傳參地址，而 params 得寫法是用 name 來編寫傳參地址，你可以看一下編寫路由時候得相關屬性，你也可以輸出一下 路由對象信息 看一下

2.接收方法不同， 一個用 query 來接收， 一個用 params 接收 ，總結就是誰發得 誰去接收

3.query 在刷新頁面得時候參數不會消失，而 params 刷新頁面得時候會參數消失，可以考慮本地存儲解決

4.query 傳得參數都是顯示在url 地址欄當中，而 params 傳參不會顯示在地址欄

這里說一下 route 是路由對象信息 而 router 是路由對象的 實例，區分一下

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。