在 Vue 實(shí)例內(nèi)部，你可以通過 $router 訪問路由實(shí)例。因此你可以調(diào)用 this.$router.push

想要導(dǎo)航到不同的 URL，則使用 router.push 方法。這個(gè)方法會(huì)向 history 棧添加一個(gè)新的記錄，所以，當(dāng)用戶點(diǎn)擊瀏覽器后退按鈕時(shí)，則回到之前的 URL。

這里我們主要采用對(duì)象跳轉(zhuǎn)形式。

要跳轉(zhuǎn)頁(yè)面的path屬性值：router.push({ path: 'my-exchange' })，對(duì)應(yīng)router數(shù)組對(duì)象中的path屬性值：

要跳轉(zhuǎn)頁(yè)面的name屬性值：router.push({ name: 'my-exchange-index' })，對(duì)應(yīng)router數(shù)組對(duì)象中的name屬性值：

給頁(yè)面?zhèn)鲄t在push函數(shù)傳入的實(shí)參對(duì)象中的第二個(gè)屬性傳入 query 或 params對(duì)象即可，對(duì)象中寫具體要傳的參數(shù)(注：如果query 或 params對(duì)象中的屬性傳入的有引用類型的，則需要JSON.stringify(引用類型)轉(zhuǎn)化一下)。

在對(duì)應(yīng)的頁(yè)面接收也只需要：this.$route.query 或 this.$route.params:

官方解釋：

其中我個(gè)人建議對(duì)象的第一個(gè)屬性用name來控制要跳轉(zhuǎn)的頁(yè)面，因?yàn)槿绻?strong>path的話，params屬性將會(huì)被忽略(也就是說傳參要采用拼接字符串的方式，超不利于代碼越多，看的還不舒服)。

同時(shí)對(duì)于第二個(gè)屬性，我個(gè)人建議采用query來進(jìn)行路由傳參，因?yàn)?params 對(duì)象傳參，只要頁(yè)面一刷新你傳入的參數(shù)就沒了，query則保存在url地址中，你怎么刷新它都還在。

小總結(jié)一下：

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

params傳參會(huì)丟失數(shù)據(jù)，query不會(huì)。

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

所以偶爾也會(huì)使用params傳參。

當(dāng)然啦，也有很多方法可以處理params傳參會(huì)丟失數(shù)據(jù)問題，比如通過Cookies來存儲(chǔ)數(shù)據(jù)即可。

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

總結(jié)

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

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