I have a component with a navigation bar at the top. When the user clicks a button in the navigation bar, the component will dynamically render the correct component at the bottom of the page.
The problem is that each component has a link to an entirely different component so if the user navigates away from the component with the nav bar and clicks back, it brings the user back to the component, but not with the correct component rendered at the bottom of page. Instead, it just shows the default because the entire page was refreshed/mounted.
Is there an easy way to make the back button bring the user back to the previous component with the correct bottom component loaded?
More details:
Here is a photo of nav bar for reference:
And each button in nav bar will render a new component at the bottom of the page.
This is how the component is rendered:
<component :is="dynamicComponent" v-bind="{ data: fakeData }"></component>
And these are the relevant methods:
computed: {
dynamicComponent() {
if (this.title === "Profile") {
return ProfileVue;
}
else if (this.title === "Bookmarks") {
return BookmarksVue;
}
else if(this.title === "Visited") {
return VisitedVue;
}
}
},
mounted() {
},
methods: {
switchDataShown(value) {
this.title = value
}
}
Basically when the title changes by clicking in the nav bar, then a new component will be rendered.
So, if the user clicks Visited and then navigates to an entirely different page, how can I make the back button bring the user back to the component and show Visited instead of the default which is Profile.