CODEWITHSUNDEEP
vue.jsnuxt.js
seyet
seyet

Reputation: 1150

nuxt. going to search page by this.$router.push clears URL query parameters

I want to go to my search page in nuxt myApp.com/search?parameter=1 from my main page. In the main page I can go to search page in two ways, by using a nuxt-link:

<NuxtLink
  :to="`/search?parameter=${number}`"
>
</NuxtLink>

Or I can go with a method:

goToSearch() {
  this.$router.push(`/search?parameter=${this.number}`);
},

When I use the nuxt-link and land on search page the url is correct with parameter: myApp.com/search?parameter=1 But when I use my method which is conencted to a button in the page and I land on search page the url becomes myApp.com/search which is problematic for me!

Please note I have two have both the method and the nuxt-link. How can I fix it so when I use the method and go to search page I keep the parameters?

Upvotes: 0

Views: 2372

Answers (2)

Nao
Nao

Reputation: 23

I experienced the same issue as the OP, however, I resolved the issue by preventing the default click action, using @click.prevent, for example:

<button @click.prevent="$router.push({ path: 'search-page', query: { search: number } })">
  Try some other way
</button>

I hope saves someone hours of soul searching!

Upvotes: 0

kissu
kissu

Reputation: 46696

You should use this, as mentioned in the documentation

<nuxt-link :to="{ path: 'search-page', query: { search: number } }">
  Try search page
</nuxt-link>

You can also use it this way, depending on what you're trying to achieve.

<button @click="$router.push({ path: 'search-page', query: { search: number } })">
  Try some other way
</button>

A correct /pages/search-page.vue page can be found here.

Upvotes: 2

Related Questions