0

I have a project using vue 3 and vue router 4, my issue is that it redirects me to 404 page after I reload the page. It works when I'm navigating using route links.

The route that I'm trying to access is added to route list after user login.

Below are my codes.

Create routes

export const adminRoutes = [...Dashboard, ...Delivery, ...Couriers];
const routes: Array<RouteRecordRaw> = [...staticRoutes, ...Dashboard];
const router = createRouter({
      history: createWebHistory(), //createWebHistory(process.env.BASE_URL),
      routes
});

404 Route

{
    path: "/:pathMatch(.*)*",
    // redirect: "/404",
    component: () =>
      import(/* webpackChunkName: "Error404" */ "../views/Error404.vue")
}

Add admin routes after login

const dynamicRoutes = generateRoutes(userPermission);
AuthStore.dispatch(AuthActions.SET_ROUTES, dynamicRoutes);
dynamicRoutes.forEach((route: RouteRecordRaw) => {
    router.addRoute(route);
});
console.log("NEXT ROUTE -------------", to);
console.log("ROUTER LIST -------------", router.getRoutes());
next();

After user login then reload /delivery, /delivery/edit it redirects to 404 page, but /delivery, /delivery/edit is in the route list based on the console output.

enter image description here

PenAndPapers
  • 2,018
  • 9
  • 31
  • 59
  • If you reload, then the router will have only the original routes and you will see the 404 until the user enters again. Isn't that what is happening? – Roberto Langarica Apr 21 '21 at 14:49
  • Even after the user is logged in it shows 404 when page is refreshed.Is this has something to do with the route name. Because if you look into the console output of NEXT ROUTE the route has no name and meta only paths. – PenAndPapers Apr 22 '21 at 01:02
  • Does this answer your question? [Vue Router return 404 when revisit to the url](https://stackoverflow.com/questions/36399319/vue-router-return-404-when-revisit-to-the-url). Yes, it's for an older version of Vue Router but you still need the same server-side URL handling – Phil Apr 22 '21 at 01:17
  • How are you navigating to the admin routes?? The name matters only if you navigate by name instead of path. Another thing that I'm thinking is the routes order, if your 404 is the one with the regex for caching all unknown routes then it should be the last one, the docs aren't specifying if the new added routes resolve before or after the existing ones. Remove or comment your 404 to see if that's the case. – Roberto Langarica Apr 22 '21 at 01:21
  • I ran a test and the 404 is not catching the new added routes. I could add a new route and immediately navigate to that route, of course if you refresh I'm also immediately redirected to the 404 since at the moment of refresh the dynamic routes are not part of the router and the router solves the route to 404, every time you reload the app state including any added route will be lost. What about using route guards for protecting routes?? – Roberto Langarica Apr 22 '21 at 01:40
  • I've tried removing the 404 route and it just shows blank page. Ok, I'll try to use route guards. – PenAndPapers Apr 22 '21 at 01:51

0 Answers0