在 Vue 實例內部，你可以通過 $router 訪問路由實例。因此你可以調用 this.$router.push

想要導航到不同的 URL，則使用 router.push 方法。這個方法會向 history 棧添加一個新的記錄，所以，當用戶點擊瀏覽器后退按鈕時，則回到之前的 URL。

這里我們主要采用對象跳轉形式。

要跳轉頁面的path屬性值：router.push({ path: 'my-exchange' })，對應router數組對象中的path屬性值：

要跳轉頁面的name屬性值：router.push({ name: 'my-exchange-index' })，對應router數組對象中的name屬性值：

給頁面傳參則在push函數傳入的實參對象中的第二個屬性傳入 query 或 params對象即可，對象中寫具體要傳的參數(注：如果query 或 params對象中的屬性傳入的有引用類型的，則需要JSON.stringify(引用類型)轉化一下)。

在對應的頁面接收也只需要：this.$route.query 或 this.$route.params:

官方解釋：

其中我個人建議對象的第一個屬性用name來控制要跳轉的頁面，因為如果是path的話，params屬性將會被忽略(也就是說傳參要采用拼接字符串的方式，超不利于代碼越多，看的還不舒服)。

同時對于第二個屬性，我個人建議采用query來進行路由傳參，因為 params 對象傳參，只要頁面一刷新你傳入的參數就沒了，query則保存在url地址中，你怎么刷新它都還在。

小總結一下：

使用params傳參在瀏覽器的url地址欄中是不可見得，query則類似于get傳參，是可見的。

params傳參會丟失數據，query不會。

不過雖然params傳參會丟失數據，但是它不會污染 url 路徑，會顯得 url 路徑特別的整潔干凈。

所以偶爾也會使用params傳參。

當然啦，也有很多方法可以處理params傳參會丟失數據問題，比如通過Cookies來存儲數據即可。

在頁面進入就執行的生命周期函數中看一下 this.$route.params 中有沒有東西，如果有，則把它存到 Cookies 里面，如果頁面刷新了，數據沒了，則直接從Cookies 里面拿即可。

總結

以上是生活随笔為你收集整理的@query传参_vue-router中params传参和query传参的区别及处理方法的全部內容，希望文章能夠幫你解決所遇到的問題。

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