如何在 Vue.js 中將 router.push 用於相同路徑、不同查詢參數

Question

當前 url 是

/?type=1

我想在這個頁面上使用 router.push 。

this.$router.push('/?type=2');

但這會產生 NavigationDuplicated 錯誤。

我不想使用類似的參數

/:type

Answer 1

Aliraza 已經回答了您的問題，但我分享了這個答案，因為我看到您的評論在詢問，組件不重新渲染，對於重新渲染組件，您需要像這樣觀看參數：

 watch: {
    '$route.params': 'functionToRunWhenParamsChange',
  }

Answer 2

請參閱此GitHub 問題。 他們正在使用this.$router.replace但我想它與您使用this.$router.push時的根本原因相同。 建議的解決方案/解決方法是使用鏈接到$router調用的空catch ，因此：

this.$router.push('/?type=2').catch(err => {})

編輯

您也可以將查詢參數作為對象傳遞給this.$router.push的第二個參數：

this.$router.push({ query: { type: 2 } })

Answer 3

那是因為它與您當前的路徑沒有什么不同。 如果type的值不同，它不會給您NavigationDuplicated錯誤。 您也可以像下面這樣分開查詢，以確保框架可以理解它：

this.$router.push({
   path: '/',
   query: { type: 2 },
});

Answer 4

<router-view :key="$route.fullPath"

Answer 5

如果您想更改 url （我的意思是推送到另一個 web 頁面）並重新加載該頁面，您應該使用以下語法：

window.location.href = "your-url"

GG