Vue-router doesn't redirect with @click

Question

Template:

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

Js script:

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

Here's the problem. If I click enter in the input, the redirection will work fine to the route with name tag. If I click the button, the redirection will try to happen (I will see in browser url the change) but then instantly it will go back to the existing page

the provided code has no problem. The issue is probably caused by something else. — Jacob Goh

Jacob Goh Jacob Goh · Accepted Answer · 2018-03-02T13:48:19

I suspect that you have a <form> tag wrapping the button and input. And the button click trigger form submission so the page reload and returns to the same page.

Try modifying the click event into @click.prevent="redirect".

.prevent will have the effect of event.preventDefault() on the click event.

Will delete this answer if using <form> is not the reason.

Vue-router doesn't redirect with @click

2 Answers