How to pass new query params to URL in Vue and reload even if its the same page?

mcool 0
Viewed 59

I have a website that has a search bar. When the user searches and hits enter, I need the page to reload with the new query params in the URL.

The problem is, if the user is already on that page, even though the query params are updating, the page does not reload. I have to physically hit refresh to see the new results.

I already know that I can pass in a key to router-view to fix this issue but I need an alternative as no where in my project is router-view even used.

What is another option to simply reload the page?

redirect({ lat, lng }) {
  router.push({ name: 'test-route', query: { lat, lng }})
}
vue-router vuejs3 vue.js
1 Answers

You can do something like this

          this.$router.replace({
            ...this.$router.currentRoute,
            query: your new list of query parameters, can be an empty object
          });

Keep in mind that if the new query object has the same key/value pairs as the current one - VueRouter will not perform a navigation.

However, if there is not even a single <router-view> in your application - you won't be able to change routes because Vue does not know where to render the route.

IVO GELOV0
Related