[Vuejs]-Vue.js Push and the back button

5๐Ÿ‘

โœ…

I think you are using $router.push in the created or mounted hook of your route component for /items/:itemID.

When you use $router.push, a new item in history stack gets created. So your history stack now looks as follows:

/list >> /items/:itemID >> /items/:itemID/Property1

As the back button generally takes you to the previous entry in your history stack, it takes you to /items/:itemID as expected.

To avoid this, you may use $router.replace instead of $router.push as explained here:

https://router.vuejs.org/en/essentials/navigation.html

Quoted from the page above:

router.replace(location)

It acts like router.push, the only difference is that it navigates without pushing a new history entry, as its name suggests โ€“ it replaces the current entry.

If you use $router.replace, your history stack now will be:

/list >> /items/:itemID/Property1

Now if you hit the back button, you will end up in /list.

๐Ÿ‘คMani

Leave a comment