Search code examples
vue.jsroutervuexbacknuxt.js

Allow natural back button behaviour with use case of dynamically-added query parameters


I have the case that I push some parameters to the nuxt router (https://router.vuejs.org/guide/essentials/navigation.html) whenever somebody visits a page without any parameters.

Example: somebody visits: /program it will end up in /program/first-event?year=2018&month=6 (First the view filters the program for current events (therefore the parameters for this year and this month) and then from the filtered events it will set the first event as active post (also by pushing it to the router).

This is all wanted and good. BUT now I detected the following problem: Somebody is visiting /aboutus and then navigates to /program, the router will automatically change to /program/url-of-event-post?year=2018&month=6. Assuming the user wants to go back to /aboutus he clicks on the browser back button. This will bring him back to: /program which automatically adds the post and the parameters again (effectively moving one step forward again).

Means the user is caught in clicking endlessly on the back button. My approach would be to try to register if a user clicks on the back button and if so, I would not add the parameters. But I don't know how to do this. I thought the router would provide some 'from' property, but so far I did not find anything.

I would be very happy to hear some thoughts on this. Thank you heaps in advance.


Solution

  • You need use router.replace.

    https://router.vuejs.org/guide/essentials/navigation.html#router-replace-location-oncomplete-onabort