Replace routes if you don't want to add them to history

Background

When building applications, we often have multiple pages like the home page /home, profile /profile and others. We navigate between those pages using client side routes like vue-router. Each page is given a route when requested, it displays that particular page. We, hence, can navigate between the different pages by requesting their routes. when clicking the browser back button, it takes us to the previously requested route.

Issue

In the profile page, I might have nested pages with nested routes and a sidebar on the left side to navigate between the profile routes which could be info (/profile/info)to display the information about the user, payment (/profile/payment) to display their payment history, and message (/profile/message) page.

If I navigate to the info route, then to payment, the back button takes to the info. However, I want to technically disable the back button in the profile page so that it never takes back to another nested route within the profile.

Regardless of how many times, I navigate between the profile routes. When I hit the back button, I want to go back to the home page.

Solution

We need to replace the routes so it is not pushed into the history stack.

There are a few ways of doing that in vue-router whether you are using programatic navigation or router-link

 // Programmatic navigation
router.push({ path: '/profile/info', replace: true })
or
router.replace({ path: '/profile/info' })
// router-link
 <router-link to="/profile/info" replace>Info</router-link>

Thanks for reading