Vue-router不使用@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，重定向将很好地工作到名为tag的路由。如果我点击按钮，重定向将尝试发生(我将在浏览器url中看到更改)，但随后它将立即返回到现有页面。

Answer 1

我怀疑您有一个包装按钮和输入的<form>标记。然后点击button触发表单提交，这样页面就会重新加载并返回到同一页面。

尝试将单击事件修改为@click.prevent="redirect"。

.prevent将在单击事件上具有event.preventDefault()的效果。

如果使用<form>不是原因，将删除此答案。

Answer 2

我不知道是什么导致了这个错误。当您尝试使用单击事件重定向时，也许可以检查this.searchQuery是否有值。不管是哪种情况，我认为你最好使用<router-link />来重定向你的页面。如果您希望路由器链接看起来像一个按钮，则传递tag='button'，如下例所示：

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