Vue路由器不使用@click重定向

Question

模板：

<button @click="redirect">Search</button>
<input v-model="searchQuery" v-on:keyup.enter="redirect" type="text">

js腳本：

export default {
  methods: {
    redirect: function() {
      if (this.searchQuery) {
        this.$router.push({
          name: 'tag',
          params: {
            tag: this.searchQuery
          }
        })
      }
    }
  },
  data() {
    return {
      searchQuery: ''
    }
  }
}

這是問題所在。 如果我在輸入中單擊Enter，則重定向將很好地適用於帶有name tag的路由。 如果單擊該按鈕，則會嘗試進行重定向（我將在瀏覽器的url中看到更改），但隨后它將立即返回到現有頁面

Answer 1

我懷疑您有一個<form>標記，用於包裝按鈕和輸入。 然后單擊button觸發表單提交，以便頁面重新加載並返回到同一頁面。

嘗試將click事件修改為@click.prevent="redirect" 。

.prevent將對click事件具有event.preventDefault()的效果。

如果不是使用<form>的原因，將刪除此答案。

Answer 2

我不知道是什么導致錯誤。 嘗試使用click事件重定向時，也許檢查this.searchQuery是否具有值。 無論哪種情況，我都認為最好使用<router-link />來重定向頁面。 如果您希望路由器鏈接看起來像一個按鈕，請按照以下示例傳遞tag='button' ：

<router-link tag='button' :to="{ name: 'tag', params: { tag: this.searchQuery }}"> search </router-link>