To see this working, head to your live site.

vue router $router.replace not working properly when client side routing in nuxt

I have search page where I am updating the query string with the updated filter values using $router.replace({params: filters});. But when I navigate to the filter page from another page using client side navigation $router.replace() is being aborted. Here is my code:

component

<filter-section
      @filterSearch="filter"
      @toggleView="handleToggleView"
      :currentlySelected="view_type"
      @mapViewMounted="loadMarkers" />

methods

           async filter(filters) {
                this.listLoading = true;

                this.APPLY_SEARCH_FILTER(filters);

                // changes the query parameters in the url to be in sync with the current filters
                this.$router.replace({query: filters}, () => {
                    // when the page is refreshed and the page is server rendered
                    // then this is working fine
                    console.log('Route replace complete');
                }, () => {
                    // when navigated to this page using client side 
                    // routing the route replace is being aborted
                    console.log('Route replace abort');
                });

                let { data } = await this.$api.Search.groups(filters);

                let groups = data.data.groups;
                let meta = data.data.meta;

                this.STORE_SEARCH_RESULTS({
                    groups: groups,
                    meta: meta
                });

                this.listLoading = false;

                this.loadMarkers();
            },

I am routing to this page from another page like this this.$router.push('/search?${searchString}'); Am I doing anything wrong here?

1 comment

Answers (1)

AnswerDeveloper

Jan 10

One way to work around this issue would be to use $router.push() instead of $router.replace() when you're updating the query string with the updated filter values. This would create a new history record for the updated route and would not try to replace the current history record.

You can also try to use $router.push({ query: { ...filters } }, () => {}, () => {})


this.$router.push({query: filters}, () => {
    console.log('Route push complete');
}, () => {
    console.log('Route push abort');
});

Additionally, you can directly pass the query params to the push method


 this.$router.push({ path: '/search', query: { ...filters } }).catch(err => err);

You could also try to use $router.go(1) inside your callback function that runs when the route is replaced successfully. This will tell Vue Router to go back one step in the history, effectively undoing the push.

It could also be possible that there is a routing guard that is preventing the change of routes, it's important to check if there is any guard that is preventing the changing of routes.