I recently decided to upgrade my Vue application from version 2 to version 3, following the official Vue migration documentation. One of the changes I made was updating the vue-router package. However, after updating my router.js file, I noticed that when running the application locally, it defaults to routing to a 404 page not found component.
Previously, the application was routing to the overview page at http://localhost:8080/overview. Now, this URL leads to the page not found component. Below is a snippet of my updated router.js file:
router.js
/* [IMPORT] Library */
import { createRouter, createWebHistory } from 'vue-router';
/* [IMPORT] Common module */
import store from '~/common/store';
/* [IMPORT] modules */
import devModule from '~/module/devModule';
import pageNotFoundPage from '~/page/common/pageNotFound';
/* [IMPORT][PAGE] OverView */
import overviewPage from '~/page/overview/overviewPage';
const routes = [
{ path: '/' , redirect: '/dev'},
{ path: '/dev', component: devModule, children: [
/* Default routing*/
{ path: '', redirect: 'overview/overview'},
/* OVERVIEW */
{ path: 'overview', redirect: 'overview/overview'},
{ path: 'overview/overview' , component: overviewPage}
]},
/* [404] anything else... */
{ path: '/:catchAll(.*)' , component: pageNotFoundPage },
];
export const router = createRouter({ history: createWebHistory(), routes });
/* [intercepter] */
router.beforeEach(function(to, from, next) {
// 1. Update current URL :: for store
store.commit('moveMenu',to.path);
// x. go to next menu
next();
});
export default router;
I am puzzled as to why the application is not routing to the overview page after the migration. Any suggestions or guidance on this issue would be greatly appreciated.