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

我不知道是什么导致了这个错误。当您尝试使用 click 事件重定向时，可能会检查 this.searchQuery 是否有值。无论哪种情况，我认为您最好使用 <router-link /> 来重定向您的页面。如果你想让 router-link 看起来像一个按钮，那么像这个例子一样传递 tag='button'：

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

Answer 2

我怀疑您有一个 <form> 标签包装按钮和输入。 button 单击触发表单提交，因此页面重新加载并 returns 到同一页面。

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

.prevent点击事件会有event.preventDefault()的效果

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

Vue-router 不使用@click 重定向

Vue-router doesn't redirect with @click

vue.js

vue-router

vuejs2