Currently working on a Vue.js single-page application, I am facing an issue with proper navigation when using the browser's back/forward buttons.
Upon attempting to navigate with these buttons, no new pages are created. The URL changes but components fail to load, unless navigating back to the base URL where the component is initially loaded.
The templates seem to not load at all, despite having ESlint that shows no errors.
Below is my index.js for the router setup:
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'search',
component: Search,
},
{
path: '/results?terms=:terms',
name: 'results',
component: Results,
},
{
path: '/review?id=:id',
name: 'review',
component: Review,
},
],
});
To change pages, I am currently using this method:
this.$router.push({ name: 'results', params: { terms: this.terms } });Being fairly new to Vue, I suspect it might be a simple mistake on my end. However, I have already spent quite some time troubleshooting without success. Any assistance would be greatly appreciated. Thank you.