Best way to implement history function inside Vue.js modal

Question

What would be the best way to implement a history function inside a modal (Vue.js 2)?

In my case, on a ranking page, someone can click on a user profile and a popup is opened with the user's profile. The user's profile can display to what kind of group the user belongs to, and when someone clicks the group the group's profile is loaded in that same modal. But, an arrow should be displayed to go back to the previous profile.

How to do that the best way? Should I implement named router views, or should I use slots? Or should I implement a JavaScript function?

Answer 1

Depends on whether you want to push the modal pages to browser history. If so, you can manually history.pushState() or tweak vue-router if it's already in your setup (e.g. add key to the router-view to force rerender when navigating between the same modal component).

I guess that wouldn't be necessary since the user already have the arrow icon, so you can just make the modal a vue component and change its data so it is rerendered by vue. Meanwhile you'll need to manage a history stack to get the "last page" when the arrow is clicked. It should be simple with just some arr.push()s and arr.pop()s.