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

我不知道导致错误的原因。当您尝试使用click事件重定向时，可能会检查this.searchQuery是否有值。在任何一种情况下，我认为您最好使用<router-link />来重定向您的网页。如果您希望路由器链接看起来像一个按钮，则传递tag='button'，如下例所示：

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

Vue-router不会与@click重定向

2 个答案: